/* ============================================================ CREWTHAT — DESIGN TOKENS (single source of truth) ------------------------------------------------------------ The canonical design language. Reconciles with the existing app palette (theme.css `--ct-*`) and the public marketing layer (site-public.css `--pub-*`) by aliasing them into a clean, semantic token set: color / type / space / radius / shadow / motion / z-index / breakpoints. Load order on a page: theme.css → design-tokens.css → components.css New surfaces consume `--color-*`, `--text-*`, `--space-*`, etc. Existing dashboards keep using `--ct-*` unchanged. ============================================================ */ :root { /* ---------- color primitives ---------- */ --red-500: #cc1f1f; /* brand red — primary action */ --red-600: #e02222; --gold-400: #ffb020; /* stage-light gold — accent */ --gold-500: #f3c969; --green-500: #2ecc71; /* success / live */ --amber-500: #f39c12; /* warning / coming-soon */ --blue-500: #3a9ee8; /* info / roadmap */ --ink-0: #0a0a0c; --ink-50: #0d0d0d; --ink-100: #111111; --ink-150: #15171b; --ink-200: #1a1a1a; --ink-300: #2a2a2a; --ink-400: #3a3a3a; --ink-600: #888888; --ink-800: #e8e8e8; --ink-900: #f7f7f7; /* ---------- semantic color (10 core) ---------- */ --color-bg: var(--ct-bg-deep, var(--ink-50)); --color-surface: var(--ct-bg-card, var(--ink-200)); --color-surface-2: var(--ct-bg-input, #141414); --color-line: var(--ct-border, var(--ink-300)); --color-line-hi: var(--ct-border-hi, var(--ink-400)); --color-ink: var(--ct-white, var(--ink-900)); --color-ink-dim: var(--ct-gray, var(--ink-600)); --color-primary: var(--ct-red, var(--red-500)); --color-primary-hi: var(--ct-red-hover, var(--red-600)); --color-accent: var(--gold-400); --color-success: var(--ct-green, var(--green-500)); --color-warning: var(--ct-amber, var(--amber-500)); --color-info: var(--ct-blue, var(--blue-500)); --color-danger: var(--ct-red, var(--red-500)); /* ---------- typography ---------- */ --font-ui: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: 'Bebas Neue', var(--font-ui); --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 3.75rem; /* 60 */ --text-6xl: 4.5rem; /* 72 */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.55; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --tracking-wide: 0.08em; --tracking-wider: 0.14em; /* ---------- spacing (4px base) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ---------- radii ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* ---------- shadows ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 16px -6px rgba(0,0,0,0.5); --shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.7); --shadow-xl: 0 40px 80px -20px rgba(0,0,0,0.6); --ring: 0 0 0 3px rgba(204,31,31,0.35); /* ---------- premium: glass / depth / glow ---------- The "premium dark + glass" layer. Translucent layered surfaces, hairline top-light borders, soft elevation, and accent glows. */ --glass-bg: rgba(22, 24, 29, 0.55); --glass-bg-strong: rgba(18, 20, 25, 0.78); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-hi: rgba(255, 255, 255, 0.14); --glass-blur: saturate(160%) blur(16px); --glass-blur-lg: saturate(180%) blur(24px); /* top-light gradient that gives a surface its "lit from above" sheen */ --sheen: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 22%, rgba(255,255,255,0) 60%); --sheen-strong: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 70%); /* layered elevation (ambient + key + contact) for real depth */ --elev-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px -2px rgba(0,0,0,0.5); --elev-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 28px -10px rgba(0,0,0,0.65); --elev-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -18px rgba(0,0,0,0.78); /* accent glows */ --glow-red: 0 0 0 1px rgba(204,31,31,0.4), 0 8px 30px -6px rgba(204,31,31,0.45); --glow-gold: 0 0 0 1px rgba(255,176,32,0.35), 0 8px 30px -6px rgba(255,176,32,0.35); --glow-soft-red: 0 0 40px -8px rgba(204,31,31,0.5); --glow-soft-gold: 0 0 40px -8px rgba(255,176,32,0.4); --glow-soft-green:0 0 30px -8px rgba(46,204,113,0.5); /* premium accent gradients */ --grad-primary: linear-gradient(135deg, #e0301d 0%, #cc1f1f 55%, #a51616 100%); --grad-gold: linear-gradient(135deg, #ffcf6e 0%, #ffb020 60%, #e8941a 100%); --grad-ink: linear-gradient(180deg, #15171b 0%, #0f1013 100%); --grad-hero: radial-gradient(120% 100% at 15% 0%, rgba(204,31,31,0.20), transparent 45%), radial-gradient(100% 90% at 90% 10%, rgba(255,176,32,0.13), transparent 50%), radial-gradient(140% 120% at 50% 120%, rgba(58,158,232,0.10), transparent 55%); /* ---------- motion ---------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- z-index scale ---------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 8000; --z-modal: 9000; --z-toast: 9500; --z-max: 9999; /* ---------- breakpoints (reference; use in @media manually) ---------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }