/* ══════════════════════════════════════════════════════════════════════════════ tokens.css — Design Token System The single source of truth for spacing, typography, radius, shadows, surfaces, borders, transitions, and icon sizing. Loaded BEFORE custom.css so that component/page styles can reference tokens. Palettes only override COLOR tokens — everything here is universal. ══════════════════════════════════════════════════════════════════════════════ */ :root { /* ================================================================= SPACING — 4px grid (always divisible by 2) Usage: padding: var(--space-3); gap: var(--space-4); ================================================================= */ --space-unit: 4px; --space-1: 4px; /* 1 × unit */ --space-2: 8px; /* 2 × unit */ --space-3: 12px; /* 3 × unit */ --space-4: 16px; /* 4 × unit */ --space-5: 20px; /* 5 × unit */ --space-6: 24px; /* 6 × unit */ --space-8: 32px; /* 8 × unit */ --space-10: 40px; /* 10 × unit */ --space-12: 48px; /* 12 × unit */ /* ================================================================= TYPOGRAPHY Font family: Archivo only. Heading scale: 24 / 20 / 18 / 16 / 14 / 12 px Body scale: xs=11 / sm=12 / base=13 / lg=15 / xl=17 px ================================================================= */ --font-family: "Archivo", sans-serif; --bs-body-font-family: "Archivo", sans-serif; /* Type scale factor — change once to resize all text proportionally */ --type-scale-factor: 1; /* Headings */ --h1: calc(24px * var(--type-scale-factor)); --h2: calc(20px * var(--type-scale-factor)); --h3: calc(18px * var(--type-scale-factor)); --h4: calc(16px * var(--type-scale-factor)); --h5: calc(14px * var(--type-scale-factor)); --h6: calc(12px * var(--type-scale-factor)); /* Body text */ --text-xs: calc(11px * var(--type-scale-factor)); --text-sm: calc(12px * var(--type-scale-factor)); --text-base: calc(13px * var(--type-scale-factor)); --text-lg: calc(15px * var(--type-scale-factor)); --text-xl: calc(17px * var(--type-scale-factor)); /* Type tuning — pro feel on headings */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-caps: 0.06em; /* for uppercase labels */ --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.625; /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ================================================================= BORDER RADIUS ================================================================= */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ================================================================= SHADOWS (Light Mode) Low-opacity + high-blur for modern layered feel. ================================================================= */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-popover: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.06); --shadow-btn-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.08); /* ================================================================= SURFACES Light mode: layered whites. --surface-0 = page bg, --surface-1 = card, --surface-2 = raised, --surface-3 = elevated (dropdown, popover) ================================================================= */ --surface-0: #f8f9fa; --surface-1: #ffffff; --surface-2: #ffffff; --surface-3: #ffffff; /* ================================================================= BORDERS ================================================================= */ --border-default: #e2e5e9; --border-subtle: #eef0f2; --border-strong: #cdd1d6; /* ================================================================= TRANSITIONS & EASING ================================================================= */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; /* ================================================================= ICONS — sized to match text line-heights ================================================================= */ --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; /* ================================================================= FOCUS RING ================================================================= */ --focus-ring-width: 3px; --focus-ring-color: rgba(37, 132, 190, 0.35); --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color); /* ================================================================= BACKWARD COMPAT ALIASES Ensure existing calc() patterns using --base-font-size, --margin-default, --padding-default still resolve. ================================================================= */ --base-font-size: var(--text-base); --margin-default: var(--space-3); --padding-default: var(--space-3); } /* ══════════════════════════════════════════════════════════════════════════════ DARK MODE TOKENS Surfaces: card LIGHTER than background. Shadows: all none except popover. ══════════════════════════════════════════════════════════════════════════════ */ [data-theme-version="dark"] { /* Surfaces — card lighter than bg */ --surface-0: #1a1a2e; --surface-1: #222238; --surface-2: #2a2a44; --surface-3: #32324e; /* Borders — subtle white overlay */ --border-default: rgba(255, 255, 255, 0.1); --border-subtle: rgba(255, 255, 255, 0.06); --border-strong: rgba(255, 255, 255, 0.16); /* Shadows — none except popover */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-popover: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.06); --shadow-btn-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Focus ring */ --focus-ring-color: rgba(37, 132, 190, 0.5); /* Dimmed semantic status backgrounds — 12% opacity */ --status-success-bg: rgba(76, 232, 212, 0.12); --status-warning-bg: rgba(245, 158, 11, 0.12); --status-danger-bg: rgba(234, 31, 84, 0.12); --status-info-bg: rgba(59, 130, 246, 0.12); --status-neutral-bg: rgba(156, 163, 175, 0.12); /* Dimmed semantic status text — lighter for dark bg */ --status-success-text: #6ee7b7; --status-warning-text: #fbbf24; --status-danger-text: #fca5a5; --status-info-text: #93bbfd; --status-neutral-text: #d1d5db; } /* ══════════════════════════════════════════════════════════════════════════════ RESPONSIVE SPACING OVERRIDES Scale down spacing on smaller viewports. ══════════════════════════════════════════════════════════════════════════════ */ @media only screen and (max-width: 1600px) { :root { --margin-default: 10px; --padding-default: 10px; } } @media only screen and (max-width: 767px) { :root { --margin-default: var(--space-2); --padding-default: var(--space-2); } } @media only screen and (max-width: 575px) { :root { --margin-default: var(--space-2); --padding-default: var(--space-2); } }