/* ============================================================ FORMA DESIGN SYSTEM :: tokens.css Single source of truth for every visual decision. Light mode is the default. Dark mode activates via [data-theme="dark"] on , or via system preference when [data-theme="auto"] is set. ============================================================ */ :root { /* ---------- PRIMITIVES: NEUTRAL (warm graphite) ---------- */ --neutral-0: #FFFFFF; --neutral-25: #FBFBFA; --neutral-50: #F6F6F4; --neutral-100: #EEEEEB; --neutral-200: #E1E0DC; --neutral-300: #CBCAC5; --neutral-400: #A6A5A0; --neutral-500: #807F7A; --neutral-600: #5F5E5A; --neutral-700: #454440; --neutral-800: #2C2B28; --neutral-900: #1D1C1A; --neutral-950: #141311; /* ---------- PRIMITIVES: VERDE (primary) ---------- */ --verde-50: #EDF5F1; --verde-100: #D4E7DD; --verde-200: #A8CFBB; --verde-300: #74B196; --verde-400: #3F8F6D; --verde-500: #20744F; --verde-600: #175E40; --verde-700: #124D35; --verde-800: #0E3D2A; --verde-900: #0A2E20; /* ---------- PRIMITIVES: BRASS (secondary accent) ---------- */ --brass-50: #FAF5EA; --brass-100: #F1E5C8; --brass-200: #E2CC94; --brass-300: #CFAD5E; --brass-400: #B78F3B; --brass-500: #9C782F; --brass-600: #7D6026; --brass-700: #61491D; /* ---------- PRIMITIVES: SEMANTIC ---------- */ --green-100: #D7EDDF; --green-500: #1D7A4E; --green-700: #125438; --amber-100: #FBEBD3; --amber-500: #A8620B; --amber-700: #7A4708; --red-100: #F9E1DE; --red-500: #BB3A2E; --red-700: #8C2B22; --blue-100: #DEE9F5; --blue-500: #31629B; --blue-700: #254A75; /* ============================================================ SEMANTIC ALIASES (components consume these, never primitives) ============================================================ */ /* Backgrounds */ --bg-page: var(--neutral-25); --bg-surface: var(--neutral-0); --bg-sunken: var(--neutral-50); --bg-raised: var(--neutral-0); --bg-inverse: var(--neutral-900); --bg-overlay: rgba(20, 19, 17, 0.55); /* Interactive backgrounds */ --bg-hover: var(--neutral-50); --bg-active: var(--neutral-100); --bg-selected: var(--verde-50); --bg-disabled: var(--neutral-100); /* Text */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-500); /* large text or non-essential only */ --text-disabled: var(--neutral-400); --text-inverse: var(--neutral-25); --text-brand: var(--verde-600); --text-accent: var(--brass-600); --text-link: var(--verde-600); --text-link-hover: var(--verde-700); /* Borders */ --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --border-subtle: var(--neutral-100); --border-focus: var(--verde-500); --border-error: var(--red-500); /* Brand actions */ --action-primary: var(--verde-600); --action-primary-hover: var(--verde-700); --action-primary-active: var(--verde-800); --action-primary-text: #FFFFFF; /* Status */ --status-success-bg: var(--green-100); --status-success-text: var(--green-700); --status-success-icon: var(--green-500); --status-warning-bg: var(--amber-100); --status-warning-text: var(--amber-700); --status-warning-icon: var(--amber-500); --status-error-bg: var(--red-100); --status-error-text: var(--red-700); --status-error-icon: var(--red-500); --status-info-bg: var(--blue-100); --status-info-text: var(--blue-700); --status-info-icon: var(--blue-500); /* Charts (categorical, order matters) */ --chart-1: var(--verde-500); --chart-2: var(--brass-400); --chart-3: var(--blue-500); --chart-4: var(--neutral-500); --chart-5: var(--verde-300); --chart-6: var(--red-500); /* ---------- TYPOGRAPHY ---------- */ --font-display: "General Sans", "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace; --text-display-xl: 3.25rem; /* 52px, marketing hero only */ --text-display: 2.5rem; /* 40px */ --text-h1: 1.75rem; /* 28px, page title */ --text-h2: 1.375rem; /* 22px, section */ --text-h3: 1.125rem; /* 18px, card title / subsection */ --text-body-lg: 1.0625rem; /* 17px, marketing body */ --text-body: 0.9375rem; /* 15px, app default */ --text-body-sm: 0.8125rem; /* 13px, table cells, captions */ --text-label: 0.8125rem; /* 13px */ --text-caption: 0.75rem; /* 12px */ --text-overline: 0.6875rem; /* 11px, uppercase eyebrows */ --text-kpi: 2rem; /* 32px, dashboard metric */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- SPACING (4px base) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---------- RADIUS ---------- */ --radius-sm: 4px; /* checkboxes, tags */ --radius-md: 6px; /* buttons, inputs */ --radius-lg: 10px; /* cards, modals */ --radius-xl: 14px; /* large surfaces, bottom sheets */ --radius-full: 999px; /* pills, avatars */ /* ---------- BORDERS ---------- */ --border-width: 1px; --border-width-strong: 1.5px; /* ---------- SHADOWS (cool-neutral, low spread) ---------- */ --shadow-xs: 0 1px 2px rgba(20, 19, 17, 0.05); --shadow-sm: 0 1px 3px rgba(20, 19, 17, 0.07), 0 1px 2px rgba(20, 19, 17, 0.04); --shadow-md: 0 4px 10px rgba(20, 19, 17, 0.08), 0 2px 4px rgba(20, 19, 17, 0.04); --shadow-lg: 0 12px 28px rgba(20, 19, 17, 0.12), 0 4px 8px rgba(20, 19, 17, 0.05); --shadow-focus: 0 0 0 3px rgba(32, 116, 79, 0.25); /* ---------- Z-INDEX ---------- */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ---------- MOTION ---------- */ --duration-fast: 120ms; /* hover, toggles */ --duration-base: 180ms; /* dropdowns, fades */ --duration-slow: 260ms; /* modals, drawers */ --duration-slower: 400ms; /* page-level, charts */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---------- LAYOUT ---------- */ --container-content: 1200px; /* marketing sites */ --container-app: 1440px; /* dashboards */ --container-prose: 680px; /* long-form reading */ --sidebar-width: 256px; --sidebar-collapsed: 64px; --topbar-height: 56px; --touch-target: 44px; color-scheme: light; } /* ============================================================ DARK MODE ============================================================ */ [data-theme="dark"] { --bg-page: var(--neutral-950); --bg-surface: var(--neutral-900); --bg-sunken: #100F0E; --bg-raised: var(--neutral-800); --bg-inverse: var(--neutral-25); --bg-overlay: rgba(0, 0, 0, 0.65); --bg-hover: var(--neutral-800); --bg-active: var(--neutral-700); --bg-selected: rgba(63, 143, 109, 0.16); --bg-disabled: var(--neutral-800); --text-primary: var(--neutral-100); --text-secondary: var(--neutral-400); --text-tertiary: var(--neutral-500); --text-disabled: var(--neutral-600); --text-inverse: var(--neutral-900); --text-brand: var(--verde-300); --text-accent: var(--brass-300); --text-link: var(--verde-300); --text-link-hover: var(--verde-200); --border-default: var(--neutral-700); --border-strong: var(--neutral-600); --border-subtle: var(--neutral-800); --border-focus: var(--verde-300); --action-primary: var(--verde-500); --action-primary-hover: var(--verde-400); --action-primary-active: var(--verde-600); --action-primary-text: #FFFFFF; --status-success-bg: rgba(29, 122, 78, 0.18); --status-success-text: #8FD1AE; --status-success-icon: #4CA478; --status-warning-bg: rgba(168, 98, 11, 0.18); --status-warning-text: #E5B36B; --status-warning-icon: #C98A38; --status-error-bg: rgba(187, 58, 46, 0.18); --status-error-text: #EFA49B; --status-error-icon: #D96A5E; --status-info-bg: rgba(49, 98, 155, 0.20); --status-info-text: #9DBFE4; --status-info-icon: #6592C4; --chart-1: var(--verde-300); --chart-2: var(--brass-300); --chart-3: #6592C4; --chart-4: var(--neutral-400); --chart-5: var(--verde-100); --chart-6: #D96A5E; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6); --shadow-focus: 0 0 0 3px rgba(116, 177, 150, 0.30); color-scheme: dark; } /* Auto mode: follow the OS */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg-page: var(--neutral-950); --bg-surface: var(--neutral-900); --bg-sunken: #100F0E; --bg-raised: var(--neutral-800); --bg-inverse: var(--neutral-25); --bg-overlay: rgba(0, 0, 0, 0.65); --bg-hover: var(--neutral-800); --bg-active: var(--neutral-700); --bg-selected: rgba(63, 143, 109, 0.16); --bg-disabled: var(--neutral-800); --text-primary: var(--neutral-100); --text-secondary: var(--neutral-400); --text-tertiary: var(--neutral-500); --text-disabled: var(--neutral-600); --text-inverse: var(--neutral-900); --text-brand: var(--verde-300); --text-accent: var(--brass-300); --text-link: var(--verde-300); --text-link-hover: var(--verde-200); --border-default: var(--neutral-700); --border-strong: var(--neutral-600); --border-subtle: var(--neutral-800); --border-focus: var(--verde-300); --action-primary: var(--verde-500); --action-primary-hover: var(--verde-400); --action-primary-active: var(--verde-600); color-scheme: dark; } } /* ============================================================ BASE STYLES ============================================================ */ * { box-sizing: border-box; } html { font-family: var(--font-body); font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--bg-page); color: var(--text-primary); font-size: var(--text-body); line-height: var(--leading-normal); } /* Numbers in data contexts always use tabular figures */ .numeric, td.numeric, .kpi-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Visible focus for keyboard users only */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* Reduced motion: kill non-essential animation */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }