/* ============================================================================= * Secuura Design Tokens — Phase 1 Foundation * Source: /Users/sjplumm/Secuura/.brand-kit/reference/admin-globals.css * Loaded AFTER theme_ssd.css so the cascade resolves Secuura tokens last. * Do NOT edit values without updating BRAND-CHIPS.md first. * ============================================================================= */ /* -- Geist webfonts (self-hosted from /wwwroot/fonts/) -- */ @font-face { font-family: 'Geist Sans'; src: url('/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Sans'; src: url('/fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Sans'; src: url('/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Sans'; src: url('/fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* -- Light theme tokens (default) -- */ :root { --font-sans: 'Geist Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --background: 210 20% 98%; --foreground: 216 50% 13%; --card: 0 0% 100%; --card-foreground: 216 50% 13%; --popover: 0 0% 100%; --popover-foreground: 216 50% 13%; --primary: 164 94% 40%; --primary-foreground: 0 0% 100%; --secondary: 217 91% 60%; --secondary-foreground: 0 0% 100%; --muted: 210 16% 93%; --muted-foreground: 213 20% 42%; --accent: 47 100% 50%; --accent-foreground: 216 50% 13%; --destructive: 0 82% 56%; --destructive-foreground: 0 0% 100%; --border: 210 16% 87%; --input: 210 16% 87%; --ring: 164 94% 40%; --radius: 0.75rem; --chart-1: 164 94% 40%; --chart-2: 217 91% 60%; --chart-3: 47 100% 50%; --chart-4: 0 82% 56%; --chart-5: 213 20% 49%; } /* -- Dark theme tokens (toggled via .dark on ) -- */ .dark { --background: 216 50% 13%; --foreground: 0 0% 97%; --card: 217 45% 14%; --card-foreground: 0 0% 97%; --popover: 217 45% 14%; --popover-foreground: 0 0% 97%; --primary: 164 94% 51%; --primary-foreground: 216 50% 13%; /* 06-13: brand navy instead of near-black — less harsh on bright teal, matches the Secuura foreground hue family */ --secondary: 217 91% 60%; --secondary-foreground: 0 0% 97%; --muted: 217 30% 20%; --muted-foreground: 213 20% 68%; --accent: 47 100% 50%; --accent-foreground: 220 60% 3%; --destructive: 0 82% 66%; --destructive-foreground: 0 0% 97%; --border: 164 94% 51% / 0.12; --input: 164 94% 51% / 0.20; --ring: 164 94% 51%; --chart-1: 164 94% 51%; --chart-2: 217 91% 60%; --chart-3: 47 100% 50%; --chart-4: 0 82% 66%; --chart-5: 213 20% 49%; } /* -- Body font assignment -- */ body { font-family: var(--font-sans); } code, kbd, pre, samp { font-family: var(--font-mono); } /* -- Custom dark-mode scrollbar (BRAND-CHIPS §5) -- */ .dark body { scrollbar-width: thin; scrollbar-color: hsl(217 30% 20%) hsl(216 50% 13%); } .dark body::-webkit-scrollbar { width: 8px; height: 8px; } .dark body::-webkit-scrollbar-track { background: hsl(216 50% 13%); } .dark body::-webkit-scrollbar-thumb { background: hsl(217 30% 20%); border-radius: 9999px; } .dark body::-webkit-scrollbar-thumb:hover { background: hsl(213 20% 49%); } /* -- Site-wide teal text-selection (BRAND-CHIPS §5) -- */ ::selection { background: hsl(164 94% 51% / 0.3); color: hsl(0 0% 97%); } /* -- 200ms page fade-in (BRAND-CHIPS §4, FOUND-10) -- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-in { animation: fadeIn 200ms ease-out; } @media (prefers-reduced-motion: reduce) { .animate-fade-in { animation: none; } }