/* ========================================================================== THE PRIVATE OFFICE — DESIGN SYSTEM · v1.0 tokens.css — Global design tokens (single source of truth) -------------------------------------------------------------------------- Consumed by base.css, components.css, and every product surface. Never hard-code a color, size or duration in product CSS — always reference a token from this file. ========================================================================== */ :root { /* ======================================================================== 01 · COLOR — Core palette ======================================================================== */ /* Midnight Navy — institutional base, structure, authority */ --c-navy: #0D1B2E; --navy-950: #050C16; --navy-900: #081326; --navy-800: #0D1B2E; --navy-700: #14263E; --navy-600: #1D3554; --navy-500: #2A4A70; --navy-400: #3F6392; --navy-300: #5F82AF; --navy-200: #9FB2CC; --navy-100: #C9D4E3; --navy-50: #E8EDF4; /* Royal Gold — ceremonial accent, seal, highlight (use sparingly) */ --c-gold: #C6A15B; --gold-800: #6E5426; --gold-700: #8A6A34; --gold-600: #A6823F; --gold-500: #C6A15B; --gold-400: #D8BB82; --gold-300: #E7D2A6; --gold-200: #F1E4C6; --gold-100: #F9F2E2; --gold-50: #FCF8EF; /* Warm Ivory — ceremonial canvas, dominant surface */ --c-ivory: #F7F2E8; --ivory-500: #E4D9BF; --ivory-400: #EDE4D0; --ivory-300: #F2ECDD; --ivory-200: #F7F2E8; --ivory-100: #FAF6EE; --ivory-50: #FCFAF5; /* White — pristine raised surfaces */ --c-white: #FFFFFF; /* Charcoal — long-form reading ink, utility neutrals */ --c-charcoal: #26292F; --charcoal-700: #1A1C20; --charcoal-600: #26292F; --charcoal-500: #3A3E45; --charcoal-400: #585D66; --charcoal-300: #7E838C; --charcoal-200: #A9AEB6; --charcoal-100: #D3D7DC; /* Emerald — verification, presence, trust (reserved accent) */ --c-emerald: #0F5D4A; --emerald-700: #0A4537; --emerald-600: #0F5D4A; --emerald-500: #17795F; --emerald-400: #3E9880; --emerald-300: #79BCA9; --emerald-100: #DEEDE7; --emerald-50: #EFF7F4; /* Signature gradients */ --grad-gold: linear-gradient(135deg, #EAD7AC 0%, #C6A15B 46%, #A6823F 100%); --grad-gold-soft: linear-gradient(135deg, #F1E4C6 0%, #D8BB82 100%); --grad-gold-line: linear-gradient(90deg, transparent 0%, #C6A15B 50%, transparent 100%); --grad-navy: linear-gradient(180deg, #0D1B2E 0%, #081326 100%); --grad-emerald: linear-gradient(135deg, #17795F 0%, #0F5D4A 100%); /* Functional */ --error-600: #A8432F; --error-100: #F6E4DF; --warning-600: #A97A2C; --warning-100: #F6ECDC; --success-600: var(--emerald-600); --success-100: var(--emerald-100); --info-600: var(--navy-500); --info-100: var(--navy-50); /* ======================================================================== Semantic surface tokens — Light (default) theme ======================================================================== */ --surface: var(--ivory-50); --surface-raised: var(--c-white); --surface-sunken: var(--ivory-300); --surface-overlay: rgba(252, 250, 245, 0.88); --ink: var(--navy-800); --ink-soft: rgba(13, 27, 46, 0.72); --ink-mute: rgba(13, 27, 46, 0.55); --ink-faint: rgba(13, 27, 46, 0.38); --line: rgba(13, 27, 46, 0.12); --line-soft: rgba(13, 27, 46, 0.08); --line-strong: rgba(13, 27, 46, 0.20); --accent: var(--gold-500); --accent-ink: var(--gold-700); --accent-wash: rgba(198, 161, 91, 0.10); --presence: var(--emerald-600); --presence-wash: var(--emerald-50); --presence-line: rgba(15, 93, 74, 0.22); --ghost-hover: rgba(13, 27, 46, 0.06); --scrim: rgba(5, 12, 22, 0.60); --focus-ring: 0 0 0 4px rgba(198, 161, 91, 0.20); /* ======================================================================== 02 · TYPOGRAPHY ======================================================================== */ --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-sub: 'Cinzel', 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SFMono-Regular', 'Cascadia Code', Consolas, 'Liberation Mono', monospace; /* Fluid display scale */ --fs-display-1: clamp(3.25rem, 5.4vw, 4.75rem); /* 52 → 76 */ --fs-display-2: clamp(2.50rem, 4.0vw, 3.50rem); /* 40 → 56 */ /* Stepped scale */ --fs-h1: 2.75rem; /* 44 */ --fs-h2: 2.25rem; /* 36 */ --fs-h3: 1.875rem; /* 30 */ --fs-h4: 1.5rem; /* 24 */ --fs-h5: 1.25rem; /* 20 */ --fs-h6: 1.125rem; /* 18 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.75rem; /* 12 */ --fs-2xs: 0.6875rem; /* 11 */ --lh-display: 1.08; --lh-heading: 1.22; --lh-body: 1.75; --lh-ui: 1.4; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --track-display: -0.015em; --track-body: 0em; --track-wide: 0.06em; --track-caps: 0.14em; --track-ceremony: 0.24em; /* ======================================================================== 03 · ELEVATION — Luxury soft shadows (low, wide, cool-biased) ======================================================================== */ --shadow-xs: 0 1px 2px rgba(8, 20, 38, 0.05); --shadow-sm: 0 1px 2px rgba(8, 20, 38, 0.04), 0 2px 8px rgba(8, 20, 38, 0.06); --shadow-md: 0 2px 6px -2px rgba(8, 20, 38, 0.06), 0 12px 28px -10px rgba(8, 20, 38, 0.12); --shadow-lg: 0 4px 10px -4px rgba(8, 20, 38, 0.06), 0 24px 56px -18px rgba(8, 20, 38, 0.16); --shadow-xl: 0 8px 18px -8px rgba(8, 20, 38, 0.08), 0 42px 88px -28px rgba(8, 20, 38, 0.22); --shadow-gold: 0 14px 34px -12px rgba(198, 161, 91, 0.50); --shadow-emerald: 0 14px 34px -12px rgba(15, 93, 74, 0.38); --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.55); --shadow-focus: var(--focus-ring); /* ======================================================================== 04 · RADIUS — 12px is the system's rest radius ======================================================================== */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; /* ← system default */ --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --r-circle: 50%; --radius: var(--r-md); /* ======================================================================== 05 · SPACING — strict 8pt scale ======================================================================== */ --space-1: 0.5rem; /* 8 */ --space-2: 1rem; /* 16 */ --space-3: 1.5rem; /* 24 */ --space-4: 2rem; /* 32 */ --space-5: 3rem; /* 48 */ --space-6: 4rem; /* 64 */ --space-7: 6rem; /* 96 */ --space-8: 8rem; /* 128 */ /* ======================================================================== 06 · MOTION — cinematic but disciplined ======================================================================== */ --dur-1: 160ms; /* micro feedback */ --dur-2: 320ms; /* state change */ --dur-3: 480ms; /* entrances / lifts */ --dur-4: 800ms; /* reveals / imagery */ --dur-5: 1200ms; /* page ceremonials */ --ease-standard: cubic-bezier(0.42, 0.00, 0.20, 1.00); --ease-lux: cubic-bezier(0.22, 1.00, 0.36, 1.00); --ease-emphasis: cubic-bezier(0.34, 1.40, 0.44, 1.00); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --stagger-1: 60ms; /* list rhythm */ --stagger-2: 120ms; /* ======================================================================== 07 · LAYOUT — 12 column grid ======================================================================== */ --container: 80rem; /* 1280 */ --container-wide: 92rem; /* 1472 */ --columns: 12; --gutter: 1.5rem; /* 24 */ --margin-x: 4rem; /* 64 desktop page margin */ --sidebar-w: 17rem; /* 272 */ /* ======================================================================== 08 · COMPONENT MEASURES ======================================================================== */ --field-h: 3.25rem; /* 52 */ --btn-h-lg: 3.5rem; /* 56 */ --btn-h-md: 3rem; /* 48 */ --btn-h-sm: 2.5rem; /* 40 */ --control: 1.25rem; /* checkbox / radio : 20 */ /* ======================================================================== 09 · Z-INDEX scale ======================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-drawer: 40; --z-header: 50; --z-overlay: 100; --z-toast: 110; } /* ======================================================================== DARK THEME — semantic overrides (ceremonial / evening surfaces) Usage: wrap any region in [data-theme="dark"] ======================================================================== */ [data-theme="dark"] { --surface: var(--navy-900); --surface-raised: var(--navy-800); --surface-sunken: var(--navy-950); --surface-overlay: rgba(8, 19, 38, 0.88); --ink: var(--ivory-100); --ink-soft: rgba(247, 242, 232, 0.74); --ink-mute: rgba(247, 242, 232, 0.54); --ink-faint: rgba(247, 242, 232, 0.34); --line: rgba(247, 242, 232, 0.15); --line-soft: rgba(247, 242, 232, 0.09); --line-strong: rgba(247, 242, 232, 0.24); --accent-ink: var(--gold-300); --accent-wash: rgba(198, 161, 91, 0.14); --presence-wash: rgba(23, 121, 95, 0.14); --ghost-hover: rgba(247, 242, 232, 0.08); --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.06); color-scheme: dark; }