/* ============================================================ EVA — Design Tokens Satopia Group internal operating system ------------------------------------------------------------ The foundations. Nothing outside this file hard-codes a value. Import order: eva-tokens.css → eva.css ============================================================ */ :root { /* ---------- Type ---------- Base font: the system stack. On Apple hardware this renders SF Pro — the "Apple feel" is the native rendering, not a webfont. Fallbacks: Segoe UI (Windows), Roboto (Android/ChromeOS). TWO WEIGHTS ONLY: 400 (regular) and 600 (semibold). No italics. */ --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --w-regular: 400; --w-semibold: 600; /* Scale — size / line-height / letter-spacing, semantic names. Tracking tightens as size grows (SF-style optical spacing). */ --fs-metric: 34px; --lh-metric: 40px; --ls-metric: -0.024em; /* big numbers */ --fs-title-lg: 28px; --lh-title-lg: 34px; --ls-title-lg: -0.022em; /* page titles */ --fs-title: 22px; --lh-title: 28px; --ls-title: -0.018em; /* section titles */ --fs-headline: 17px; --lh-headline: 24px; --ls-headline: -0.012em; /* card titles, row titles */ --fs-body: 15px; --lh-body: 22px; --ls-body: -0.006em; /* default text */ --fs-footnote: 13px; --lh-footnote: 18px; --ls-footnote: 0; /* secondary text, table meta */ --fs-caption: 11px; --lh-caption: 14px; --ls-caption: 0.06em; /* UPPERCASE labels only */ /* ---------- Spacing ---------- Base unit 4px. Standard gaps: between sections: --s-8 · between cards: --s-5 inside a card: --s-5 · label → field: --s-2 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---------- Colour roles ---------- Roles, not swatches. Components only ever reference roles. */ --canvas: #FDFBF6; /* the page behind everything */ --surface: #FFFFFF; /* cards, panels, tables */ --surface-sunken: #F4F1EA; /* insets: segmented track, skeleton base */ --shell: #16161A; /* topbar + sidebar */ --shell-text: rgba(255,255,255,0.92); --shell-text-muted: rgba(255,255,255,0.85); --shell-hover: rgba(255,255,255,0.07); --shell-active: rgba(255,255,255,0.11); --ink: #1D1D1F; /* primary text */ --ink-muted: #6E6E73; /* secondary text */ --ink-faint: #AEAEB2; /* tertiary text, disabled */ --separator: rgba(60,50,30,0.07); /* hairlines (inside tables/lists only) */ --overlay: rgba(0,0,0,0.45); /* behind drawers */ /* ---------- Brand accents ---------- Used ONLY for: sidebar active-item 3px marker, brand header accents, brand badges. Everything else is neutral. */ --brand-travel: #1CA5A5; /* Satopia Travel — deep teal */ --brand-elkemist: #7840D3; /* Elkemist — purple */ --brand-events: #E21866; /* Special Events — pink */ --brand-pursuit: #AEDA29; /* Pursuit Magazine — green */ --brand-group: #2097F8; /* Satopia Group — blue */ --brand-studios: #E21866; /* Satopia Studios — pink */ --brand-spaces: #AEDA29; /* Satopia Spaces — green */ /* The live accent. Re-scoped by [data-brand] below. */ --accent: var(--ink); /* ---------- Status ramp ---------- Each state: a text tone (AA on white) + a fill tone. */ --status-live: #1E7A46; --status-live-fill: #E8F3EC; --status-pending: #96660F; --status-pending-fill: #FAF2E1; --status-info: #2E5EA9; --status-info-fill: #EAF1FB; --status-overdue: #B3261E; --status-overdue-fill: #FBECEB; --status-closed: #6E6E73; --status-closed-fill: #F1F1F3; /* Deltas on metric cards */ --delta-up: var(--status-live); --delta-down: var(--status-overdue); /* ---------- Radii ---------- --r-sm badges, chips, small controls --r-md buttons, inputs, segmented controls --r-lg cards, panels, tables, metric cards --r-xl drawers, modals, toasts --r-full avatars, toggle knobs */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px; /* ---------- Elevation ---------- Rule: things resting IN the page are flat (--e-0) or barely lifted (--e-1). Only things floating OVER the page are raised (--e-2 popovers/toasts, --e-3 drawers). Never on buttons. */ --e-0: none; --e-1: 0 1px 2px rgba(46,38,20,0.04), 0 6px 20px rgba(46,38,20,0.05); --e-2: 0 4px 16px rgba(46,38,20,0.10), 0 12px 32px rgba(46,38,20,0.08); --e-3: 0 16px 48px rgba(46,38,20,0.20); /* ---------- Motion ---------- --t-fast state changes (hover, press, toggle) --t transitions (tab swap, chip select) --t-slow entrances (drawer, toast) One decelerating curve; a gentle spring only for entrances. */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 180ms; --t: 300ms; --t-slow: 520ms; /* ---------- Layout ---------- */ --topbar-h: 52px; --sidebar-w: 252px; --sidebar-w-rail: 64px; --hit-target: 44px; --content-pad: var(--s-6); } /* Chrome variant — default is dark (per brief). Set data-chrome="light" on to explore the light-navigation direction. */ :root { --shell-border: transparent; } [data-chrome="light"] { --shell: #FFFFFF; --shell-text: var(--ink); --shell-text-muted: var(--ink-muted); --shell-hover: rgba(0,0,0,0.045); --shell-active: rgba(0,0,0,0.07); --shell-border: var(--separator); } /* light chrome: the left nav sits on the page's cream, not white */ [data-chrome="light"] .ev-sidebar { background: var(--canvas); } /* Brand context — set data-brand on (or any subtree). */ [data-brand="travel"] { --accent: var(--brand-travel); } [data-brand="elkemist"] { --accent: var(--brand-elkemist); } [data-brand="events"] { --accent: var(--brand-events); } [data-brand="pursuit"] { --accent: var(--brand-pursuit); } [data-brand="group"] { --accent: var(--brand-group); } [data-brand="studios"] { --accent: var(--brand-studios); } [data-brand="spaces"] { --accent: var(--brand-spaces); } /* Reduced motion: durations collapse, nothing depends on animation. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; } }