/* /deck/ design tokens — canonical source. * * Single source of truth for color, type, spacing, radii, shadows, motion * and z-index for the /deck/ (admin_saas) surface. Imported by deck.css * (the unified stylesheet); every /deck/ template loads deck.css. * * No build step. No framework. Plain CSS custom properties — readable in * DevTools, scannable in PR diffs. * * --- Dark theme (4k future) --- * * [data-theme="dark"] is authored upfront so the toggle ships in a later * slice without retrofitting the token file. No element sets data-theme * today, so the block has no effect. */ :root { /* ===== Color — light (Havre navy + amber-ochre opinion) ===== */ /* Surfaces */ --canvas: #F4F5F7; /* slightly cooler than the prior #F8F9FA */ --surface: #FFFFFF; --surface-sunken: #ECEEF1; /* table header rows, input bg, code blocks */ --surface-raised: #FFFFFF; --overlay: rgba(15, 18, 22, 0.48); /* Text */ --text: #0F1216; /* canonical primary text */ --fg: var(--text); --muted: #5A6470; --fg-muted: var(--muted); --fg-subtle: #8A93A0; --fg-on-primary: #FBFAF7; /* warm off-white on navy */ --fg-on-accent: #1A1208; /* Borders */ --border: #E3E6EA; --border-strong: #C8CDD4; --border-subtle: #EDEFF2; /* Brand — Havre navy */ --primary: #1A2434; --primary-hover: #0F1622; --primary-soft: #E8ECF2; /* Accent (warm) — declared additively for later slices */ --accent: #C28A2C; --accent-hover: #A87421; --accent-soft: #FBF1DC; /* Semantic */ --success: #2B7A3B; --success-soft: #E5F4E8; --warning: #C77800; --warning-soft: #FFF4D6; --danger: #B23A48; --danger-soft: #FBDADF; --info: #1F6FB5; --info-soft: #E1EEF9; /* Status (tenant lifecycle — used by badges later) */ --status-draft: var(--fg-subtle); --status-draft-soft: #EDEFF2; --status-active: var(--success); --status-active-soft: var(--success-soft); --status-suspended: var(--warning); --status-suspended-soft: var(--warning-soft); --status-archived: var(--danger); --status-archived-soft: var(--danger-soft); /* Focus ring (a11y) */ --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent); /* ===== Typography ===== * * Inter + JetBrains Mono are preferred when available locally; the stacks * gracefully degrade to system UI fonts so we never hit Google Fonts CDN * (EU sovereignty: no third-party CDN for type). */ --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --feat-tnum: "tnum" 1, "cv11" 1; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --leading-tight: 1.25; --leading-snug: 1.4; --leading-base: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ===== Spacing (4px base) ===== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ===== Radii ===== */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --radius: var(--radius-md); /* legacy alias kept for forward compat */ /* ===== Shadows ===== */ --shadow-xs: 0 1px 0 rgba(15,18,22,0.04); --shadow-sm: 0 1px 2px rgba(15,18,22,0.06), 0 1px 1px rgba(15,18,22,0.04); --shadow-md: 0 4px 8px rgba(15,18,22,0.06), 0 2px 4px rgba(15,18,22,0.04); --shadow-lg: 0 12px 32px rgba(15,18,22,0.12), 0 4px 8px rgba(15,18,22,0.06); --shadow-inset: inset 0 1px 0 rgba(15,18,22,0.04); /* ===== Motion ===== */ --motion-instant: 0ms; --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 260ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ===== Z-index ===== */ --z-base: 0; --z-sticky: 10; --z-dropdown: 100; --z-overlay: 500; --z-modal: 501; --z-toast: 600; --z-tooltip: 700; /* ===== Layout ===== */ --shell-sidebar-w: 240px; --shell-sidebar-w-collapsed: 56px; --shell-topbar-h: 48px; --shell-content-max: 1440px; --shell-content-narrow: 880px; --shell-gutter: 24px; } /* ===== Color — dark (opt-in via [data-theme="dark"] on ) ===== * * Authored upfront so the toggle slice (4k) does not need to retrofit * tokens. Inert today — no element sets data-theme. */ [data-theme="dark"] { --canvas: #0B0E13; --surface: #141821; --surface-sunken: #0F131A; --surface-raised: #1A1F2A; --overlay: rgba(0,0,0,0.6); --text: #E8EAEE; --fg: var(--text); --muted: #9BA3AF; --fg-muted: var(--muted); --fg-subtle: #6B7280; --fg-on-primary: #0B0E13; --fg-on-accent: #0B0E13; --border: #232934; --border-strong: #2F3744; --border-subtle: #1B2029; --primary: #E8ECF2; --primary-hover: #FBFAF7; --primary-soft: #1B2330; --accent: #E0A547; --accent-soft: #2A2014; --success-soft: #15301C; --warning-soft: #2E2310; --danger-soft: #2F1418; --info-soft: #112233; --status-draft-soft: #1B2029; --status-active-soft: var(--success-soft); --status-suspended-soft: var(--warning-soft); --status-archived-soft: var(--danger-soft); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 16px 40px rgba(0,0,0,0.6); } /* Respect reduced-motion globally. Mirrors proposal.md §2.7. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }