/* |-------------------------------------------------------------------------- | Storefront Global Tokens |-------------------------------------------------------------------------- | Provides a shared palette and utility helpers across front, user, and | admin surfaces. Light mode is the default; dark mode overrides are applied | whenever the element carries a `dark` class (managed via JS). */ :root { color-scheme: light; --sf-bg-primary: #f5f8ff; --sf-bg-secondary: #ffffff; --sf-surface: #eef2ff; --sf-border: rgba(79, 97, 148, 0.18); --sf-text-primary: #0f172a; --sf-text-secondary: #475569; --sf-text-muted: #64748b; --sf-accent-primary: #7c5cff; --sf-accent-secondary: #29ffc6; --sf-accent-contrast: #ff7cf6; --sf-shadow: rgba(15, 23, 42, 0.1); } html.dark { color-scheme: dark; --sf-bg-primary: #060b1b; --sf-bg-secondary: #101a33; --sf-surface: #162246; --sf-border: rgba(114, 138, 221, 0.35); --sf-text-primary: #f2f7ff; --sf-text-secondary: #c9d6ff; --sf-text-muted: #94a3b8; --sf-accent-primary: #29ffc6; --sf-accent-secondary: #7c5cff; --sf-accent-contrast: #ff7cf6; --sf-shadow: rgba(10, 22, 55, 0.45); } body { background-color: var(--sf-bg-primary); color: var(--sf-text-primary); transition: background-color 250ms ease, color 250ms ease; } a { color: var(--sf-accent-primary); transition: color 150ms ease; } a:hover, a:focus-visible { color: var(--sf-accent-secondary); } .sf-btn-primary { background: linear-gradient(135deg, var(--sf-accent-primary), var(--sf-accent-secondary)); color: var(--sf-bg-primary); border: none; box-shadow: 0 16px 35px -18px var(--sf-shadow); } .sf-badge-glow { background: var(--sf-accent-secondary); color: var(--sf-text-primary); box-shadow: 0 0 22px -6px var(--sf-accent-secondary); } .sf-card { background: var(--sf-bg-secondary); border: 1px solid var(--sf-border); box-shadow: 0 25px 65px -40px var(--sf-shadow); } .sf-text-muted { color: var(--sf-text-muted); } input[type='text'], input[type='email'], input[type='password'], input[type='number'], input[type='tel'], input[type='url'], input[type='search'], select, textarea { background-color: var(--sf-bg-secondary); color: var(--sf-text-primary); border: 1px solid var(--sf-border); transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease; } input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, input[type='number']:focus, input[type='tel']:focus, input[type='url']:focus, input[type='search']:focus, select:focus, textarea:focus { border-color: var(--sf-accent-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent-secondary) 25%, transparent); outline: none; } html.dark input[type='text'], html.dark input[type='email'], html.dark input[type='password'], html.dark input[type='number'], html.dark input[type='tel'], html.dark input[type='url'], html.dark input[type='search'], html.dark select, html.dark textarea { background-color: var(--sf-surface); color: var(--sf-text-primary); border: 1px solid var(--sf-border); } input::placeholder, textarea::placeholder { color: var(--sf-text-muted); } html.dark input::placeholder, html.dark textarea::placeholder { color: color-mix(in srgb, var(--sf-text-muted) 80%, white 20%); } .toast-container { position: fixed; top: 1.25rem; right: 1.25rem; width: min(22rem, calc(100% - 2.5rem)); z-index: 60; display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none; } .toast { display: flex; width: 100%; background: var(--sf-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--sf-border); box-shadow: 0 20px 45px -30px var(--sf-shadow); transform: translateY(-10px); opacity: 0; transition: transform 200ms ease, opacity 200ms ease; pointer-events: auto; overflow: hidden; } .toast-enter { transform: translateY(0); opacity: 1; } .toast-leave { transform: translateY(-8px); opacity: 0; } .toast-accent { width: 4px; background: var(--sf-accent-secondary); } .toast-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; width: 100%; font-size: 0.875rem; color: var(--sf-text-primary); } .toast-dismiss { background: transparent; border: none; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: opacity 150ms ease; } .toast-dismiss:hover, .toast-dismiss:focus-visible { opacity: 0.65; } .toast[data-toast-type='success'] .toast-accent { background: var(--sf-accent-primary); } .toast[data-toast-type='warning'] .toast-accent { background: #facc15; } .toast[data-toast-type='danger'] .toast-accent { background: #f87171; } .toast[data-toast-type='info'] .toast-accent { background: #38bdf8; } html.dark .toast { background: rgba(16, 26, 51, 0.95); border-color: rgba(114, 138, 221, 0.35); color: var(--sf-text-primary); }