/* * FreightBrokerLeads.ai — Design Tokens * Linear-inspired. See DESIGN.md and UI_PLAN.md §3. * * Every color, radius, shadow, and typographic variable that the app uses * lives here. Nothing in component CSS should reference raw hex values — * always go through a token. Light + dark are sibling :root blocks keyed * by [data-theme] on . */ /* ---------- Font face declarations ---------- */ @font-face { font-family: 'Inter Variable'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter Variable'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'); } /* ---------- Mode-agnostic tokens (radii, shadows, typography, tier colors) ---------- */ :root { /* Radii */ --r-micro: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 22px; --r-pill: 9999px; --r-circle: 50%; /* Typography */ --font-sans: 'Inter Variable', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-features: "cv01", "ss03"; --fw-light: 300; --fw-reg: 400; --fw-med: 510; --fw-semi: 590; /* Brand + accent (constant across modes) */ --brand: #5e6ad2; --accent: #7170ff; --accent-hover: #828fff; --security: #7a7fad; /* Status (constant across modes) */ --success: #10b981; --success-2: #27a644; --warn: #f5a524; --warn-on-light: #d97706; --danger: #f43f5e; --danger-on-light: #e11d48; /* Tier colors (for BadgeComp.Tier) */ --tier-free: #8a8f98; --tier-starter: #5e6ad2; --tier-professional: #7170ff; --tier-enterprise: linear-gradient(135deg, #5e6ad2, #7170ff); --tier-admin: #10b981; /* Spacing scale (8px base with optical micro-adjustments per DESIGN.md §5) */ --s-1: 1px; --s-2: 4px; --s-3: 7px; --s-4: 8px; --s-5: 11px; --s-6: 12px; --s-7: 16px; --s-8: 19px; --s-9: 20px; --s-10: 22px; --s-11: 24px; --s-12: 28px; --s-13: 32px; --s-14: 35px; --s-15: 48px; --s-16: 64px; --s-17: 80px; } /* ---------- Dark mode tokens ---------- */ :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --bg-page: #08090a; --bg-panel: #0f1011; --bg-surface: #191a1b; --bg-surface-2: #28282c; --bg-card: rgba(255, 255, 255, 0.02); --bg-card-hover: rgba(255, 255, 255, 0.05); /* Text */ --text-primary: #f7f8f8; --text-secondary: #d0d6e0; --text-tertiary: #8a8f98; --text-quaternary: #62666d; /* Borders */ --border-subtle: rgba(255, 255, 255, 0.05); --border-standard: rgba(255, 255, 255, 0.08); --border-strong: #34343a; --line-tint: #141516; /* Accent-on-surface overrides (darker warn/danger not needed in dark mode) */ --warn-text: var(--warn); --danger-text: var(--danger); /* Shadows */ --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px; --shadow-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px; --shadow-elevated: rgba(0, 0, 0, 0.4) 0px 2px 4px; --shadow-dialog: rgba(0, 0, 0, 0) 0px 8px 2px, rgba(0, 0, 0, 0.01) 0px 5px 2px, rgba(0, 0, 0, 0.04) 0px 3px 2px, rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.08) 0px 0px 1px; --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px; --shadow-inset: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset; /* Overlay */ --overlay: rgba(0, 0, 0, 0.85); } /* ---------- Light mode tokens ---------- */ :root[data-theme="light"] { color-scheme: light; /* Surfaces */ --bg-page: #f7f8f8; --bg-panel: #ffffff; --bg-surface: #f3f4f5; --bg-surface-2: #e9ebee; --bg-card: rgba(0, 0, 0, 0.02); --bg-card-hover: rgba(0, 0, 0, 0.04); /* Text — mirror of dark: "not pure black" to avoid harshness */ --text-primary: #08090a; --text-secondary: #3e3e44; --text-tertiary: #62666d; --text-quaternary: #8a8f98; /* Borders */ --border-subtle: rgba(0, 0, 0, 0.05); --border-standard: rgba(0, 0, 0, 0.08); --border-strong: #d0d6e0; --line-tint: #e6e6e6; /* Warn/danger as text/icon colors need darker variants for contrast on light bg */ --warn-text: var(--warn-on-light); --danger-text: var(--danger-on-light); /* Shadows — traditional drop shadows replace border-as-shadow */ --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 1px 0px 0px; --shadow-ring: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; --shadow-elevated: rgba(0, 0, 0, 0.08) 0px 4px 12px; --shadow-dialog: rgba(0, 0, 0, 0.04) 0px 8px 24px, rgba(0, 0, 0, 0.03) 0px 4px 8px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; --shadow-focus: rgba(94, 106, 210, 0.25) 0px 0px 0px 3px; --shadow-inset: rgba(0, 0, 0, 0.04) 0px 0px 8px 0px inset; /* Overlay */ --overlay: rgba(0, 0, 0, 0.45); } /* ---------- Default theme (applied before [data-theme] is set) ---------- */ /* Fallback: if no data-theme attribute, use dark. Inline script in App.razor resolves 'system' to actual light/dark before first paint. */ :root:not([data-theme]) { color-scheme: dark; --bg-page: #08090a; --bg-panel: #0f1011; --bg-surface: #191a1b; --bg-surface-2: #28282c; --bg-card: rgba(255, 255, 255, 0.02); --bg-card-hover: rgba(255, 255, 255, 0.05); --text-primary: #f7f8f8; --text-secondary: #d0d6e0; --text-tertiary: #8a8f98; --text-quaternary: #62666d; --border-subtle: rgba(255, 255, 255, 0.05); --border-standard: rgba(255, 255, 255, 0.08); --border-strong: #34343a; --line-tint: #141516; --warn-text: var(--warn); --danger-text: var(--danger); --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px; --shadow-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px; --shadow-elevated: rgba(0, 0, 0, 0.4) 0px 2px 4px; --shadow-dialog: rgba(0, 0, 0, 0) 0px 8px 2px, rgba(0, 0, 0, 0.01) 0px 5px 2px, rgba(0, 0, 0, 0.04) 0px 3px 2px, rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.08) 0px 0px 1px; --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px; --shadow-inset: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset; --overlay: rgba(0, 0, 0, 0.85); } /* ---------- No-JS fallback for "system" preference ---------- */ /* The inline resolver in App.razor swaps data-theme="system" → "dark"/"light" before first paint. If JS is disabled it never runs, so these @media rules ensure the OS color scheme still wins for users whose stored preference is "system" (which is also the default when no fbl-theme cookie is set). */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; --bg-page: #08090a; --bg-panel: #0f1011; --bg-surface: #191a1b; --bg-surface-2: #28282c; --bg-card: rgba(255, 255, 255, 0.02); --bg-card-hover: rgba(255, 255, 255, 0.05); --text-primary: #f7f8f8; --text-secondary: #d0d6e0; --text-tertiary: #8a8f98; --text-quaternary: #62666d; --border-subtle: rgba(255, 255, 255, 0.05); --border-standard: rgba(255, 255, 255, 0.08); --border-strong: #34343a; --line-tint: #141516; --warn-text: var(--warn); --danger-text: var(--danger); --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px; --shadow-ring: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px; --shadow-elevated: rgba(0, 0, 0, 0.4) 0px 2px 4px; --shadow-dialog: rgba(0, 0, 0, 0) 0px 8px 2px, rgba(0, 0, 0, 0.01) 0px 5px 2px, rgba(0, 0, 0, 0.04) 0px 3px 2px, rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.08) 0px 0px 1px; --shadow-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px; --shadow-inset: rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset; --overlay: rgba(0, 0, 0, 0.85); } } @media (prefers-color-scheme: light) { :root[data-theme="system"] { color-scheme: light; --bg-page: #f7f8f8; --bg-panel: #ffffff; --bg-surface: #f3f4f5; --bg-surface-2: #e9ebee; --bg-card: rgba(0, 0, 0, 0.02); --bg-card-hover: rgba(0, 0, 0, 0.04); --text-primary: #08090a; --text-secondary: #3e3e44; --text-tertiary: #62666d; --text-quaternary: #8a8f98; --border-subtle: rgba(0, 0, 0, 0.05); --border-standard: rgba(0, 0, 0, 0.08); --border-strong: #d0d6e0; --line-tint: #e6e6e6; --warn-text: var(--warn-on-light); --danger-text: var(--danger-on-light); --shadow-subtle: rgba(0, 0, 0, 0.04) 0px 1px 0px 0px; --shadow-ring: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; --shadow-elevated: rgba(0, 0, 0, 0.08) 0px 4px 12px; --shadow-dialog: rgba(0, 0, 0, 0.04) 0px 8px 24px, rgba(0, 0, 0, 0.03) 0px 4px 8px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; --shadow-focus: rgba(94, 106, 210, 0.25) 0px 0px 0px 3px; --shadow-inset: rgba(0, 0, 0, 0.04) 0px 0px 8px 0px inset; --overlay: rgba(0, 0, 0, 0.45); } }