/* File: assets/css/tokens.css */ /* Design tokens — single source of truth. Do not redefine :root elsewhere. */ :root{ /* ─── Typography ───────────────────────────── */ --dag-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --dag-font-display: "Bebas Neue", "Antonio", "Inter", system-ui, sans-serif; --dag-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --dag-lh: 1.6; /* ─── Layout ────────────────────────────────── */ --dag-container: 1200px; --dag-gutter: 18px; --dag-gutter-lg: 26px; --dag-section: 72px; --dag-header-h: 72px; /* ─── Brand palette (Gasoline Alley: deep blue on white) ── */ --ga-blue: #0B3D91; /* primary — signage blue */ --ga-blue-600: #0A358A; /* hover */ --ga-blue-700: #092B73; /* active */ --ga-night: #061B3A; /* secondary — deep night blue */ --ga-night-2: #0A234A; --ga-silver: #C9D2DD; /* accent — automotive metallic */ --ga-silver-2: #E6ECF3; /* border/dividers */ --ga-silver-3: #F5F8FC; /* bg-soft */ /* ─── Core palette (light theme) ────────────── */ --dag-bg: #FFFFFF; --dag-surface: #FFFFFF; --dag-surface-2: var(--ga-silver-3); --dag-surface-3: #ECF1F8; --dag-text: #0B1220; --dag-text-2: #1F2A44; --dag-muted: #5B6B82; --dag-muted-2: #8795AB; --dag-border: var(--ga-silver-2); --dag-border-strong: #CBD5E1; /* ─── Brand tokens (semantic) ───────────────── */ --dag-primary: var(--ga-blue); --dag-primary-hover: var(--ga-blue-600); --dag-primary-active: var(--ga-blue-700); --dag-primary-contrast: #FFFFFF; --dag-secondary: var(--ga-night); --dag-secondary-hover: var(--ga-night-2); --dag-secondary-contrast: #FFFFFF; --dag-accent: var(--ga-silver); --dag-accent-hover: #B5C0CF; --dag-accent-contrast: var(--ga-night); --dag-link: var(--ga-blue); --dag-link-hover: var(--ga-blue-700); /* ─── Status ────────────────────────────────── */ --dag-success: #16A34A; --dag-warning: #D97706; --dag-danger: #DC2626; --dag-info: var(--ga-blue); /* ─── Radius ────────────────────────────────── */ --dag-radius-xs: 2px; --dag-radius-sm: 4px; --dag-radius-md: 4px; --dag-radius-lg: 6px; --dag-radius-xl: 8px; --dag-radius-pill: 4px; --dag-radius: var(--dag-radius-md); /* ─── Elevation (light-theme safe: softer alpha) ── */ --dag-shadow-xs: 0 1px 2px rgba(11,61,145,.06), 0 2px 6px rgba(11,61,145,.05); --dag-shadow-sm: 0 2px 6px rgba(11,61,145,.08), 0 10px 24px rgba(6,27,58,.07); --dag-shadow-md: 0 8px 24px rgba(11,61,145,.10), 0 20px 50px rgba(6,27,58,.10); --dag-shadow-lg: 0 16px 40px rgba(11,61,145,.14), 0 30px 80px rgba(6,27,58,.14); /* ─── Spacing ───────────────────────────────── */ --dag-gap-xs: 6px; --dag-gap-sm: 12px; --dag-gap: 16px; --dag-gap-lg: 24px; --dag-gap-xl: 32px; --dag-gap-2xl: 48px; /* ─── Interaction ───────────────────────────── */ --dag-ring-color: rgba(11,61,145,.22); --dag-ring: 0 0 0 4px var(--dag-ring-color); --dag-transition: 160ms cubic-bezier(.2,.8,.2,1); /* ─── Motion ────────────────────────────────── */ --anim-fast: 150ms; --anim-med: 220ms; --anim-slow: 420ms; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-spring: cubic-bezier(.2,1,.2,1); /* ─── Misc ──────────────────────────────────── */ --dag-max-prose: 72ch; /* ─── Layout: split header ──────────────────────────── */ --dag-topbar-h: 36px; --dag-topbar-bg: var(--ga-night); --dag-topbar-fg: #FFFFFF; --dag-topbar-muted: rgba(255,255,255,.65); /* ─── Section backgrounds (alternation) ─────────────── */ --dag-sec-white: #FFFFFF; --dag-sec-soft: var(--ga-silver-3); /* #F5F8FC */ --dag-sec-dark: var(--ga-night); /* #061B3A */ --dag-sec-dark-fg: #FFFFFF; /* ═══ Back-compat aliases (keep existing CSS stable) ═══ */ --bg: var(--dag-bg); --surface: var(--dag-surface); --surface-2: var(--dag-surface-2); --surface-raised: var(--dag-surface); --text: var(--dag-text); --muted: var(--dag-muted); --line: var(--dag-border); --border: var(--dag-border); --border-strong: var(--dag-border-strong); --primary: var(--dag-primary); --primary-600: var(--dag-primary-hover); --primary-700: var(--dag-primary-active); --primary-contrast: var(--dag-primary-contrast); --secondary: var(--dag-secondary); --accent: var(--dag-accent); --accent-2: var(--dag-primary); --brand: var(--dag-primary); --brand-2: var(--dag-secondary); --success: var(--dag-success); --warning: var(--dag-warning); --danger: var(--dag-danger); --error: var(--dag-danger); --info: var(--dag-info); --radius: var(--dag-radius); --radius-sm: var(--dag-radius-sm); --radius-md: var(--dag-radius-md); --radius-lg: var(--dag-radius-lg); --radius-card: var(--dag-radius-md); --radius-chip: var(--dag-radius-pill); --radius-control: var(--dag-radius-sm); --shadow: var(--dag-shadow-md); --shadow-soft: var(--dag-shadow-sm); --shadow-card: var(--dag-shadow-sm); --shadow-card-hover: var(--dag-shadow-md); --container: var(--dag-container); --gutter: var(--dag-gutter); --pad: var(--dag-gap); --ring: var(--dag-ring-color); /* Pagination (inherits brand) */ --pagi-accent-rgb: 11, 61, 145; --pagi-h: 40px; --pagi-gap: 8px; --pagi-radius: 12px; --pagi-accent: var(--dag-primary); --pagi-bg: var(--dag-surface); --pagi-bg-hover: rgba(11,61,145,.08); --pagi-text: var(--dag-text); --pagi-muted: var(--dag-muted); --pagi-border: var(--dag-border); --pagi-shadow: var(--dag-shadow-sm); --pagi-glow: 0 14px 34px rgba(11,61,145,.18); --pagi-ring: 0 0 0 3px rgba(11,61,145,.20); /* Inventory legacy (--cyp-*) mapped to brand */ --cyp-green: var(--dag-primary); --cyp-green-2: rgba(11,61,145,.10); --cyp-text: var(--dag-text); --cyp-muted: var(--dag-muted); --cyp-bg: var(--dag-bg); --cyp-soft: var(--dag-surface-2); --cyp-border: var(--dag-border); --cyp-shadow: var(--dag-shadow-sm); --cyp-radius: 18px; --cyp-radius-sm: 12px; --cyp-container: var(--dag-container); --cyp-t: 220ms; } @media (max-width: 900px){ :root{ --dag-section: 48px; --dag-gutter-lg: 18px; --dag-header-h: 72px; } } @media (max-width: 600px){ :root{ --dag-section: 36px; --dag-gutter: 14px; --pagi-h: 36px; --pagi-gap: 6px; --pagi-radius: 10px; } }