/* ========================================================================== TrainerPlatform - Design Tokens -------------------------------------------------------------------------- The single source of truth for every visual decision in the application. Components must reference these tokens and never hard-code a raw value. Layers: 1. Primitives (--tp--) raw palette, theme-independent 2. Semantics (--tp-) role-based, swapped per theme Only the semantic layer changes between light and dark. ========================================================================== */ :root { /* ---------------------------------------------------------------- * * 1. PRIMITIVES - raw scales. Never used directly by a component. * * ---------------------------------------------------------------- */ /* Neutral (slate) */ --tp-neutral-0: #ffffff; --tp-neutral-50: #f8fafc; --tp-neutral-100: #f1f5f9; --tp-neutral-200: #e2e8f0; --tp-neutral-300: #cbd5e1; --tp-neutral-400: #94a3b8; --tp-neutral-500: #64748b; --tp-neutral-600: #475569; --tp-neutral-700: #334155; --tp-neutral-800: #1e293b; --tp-neutral-900: #0f172a; --tp-neutral-950: #020617; /* Primary (teal) - the brand axis */ --tp-primary-50: #f0fdfa; --tp-primary-100: #ccfbf1; --tp-primary-200: #99f6e4; --tp-primary-300: #5eead4; --tp-primary-400: #2dd4bf; --tp-primary-500: #14b8a6; --tp-primary-600: #0d9488; --tp-primary-700: #0f766e; --tp-primary-800: #115e59; --tp-primary-900: #134e4a; /* Accent (amber) - energy, highlights, streaks */ --tp-accent-50: #fffbeb; --tp-accent-100: #fef3c7; --tp-accent-300: #fcd34d; --tp-accent-500: #f59e0b; --tp-accent-600: #d97706; --tp-accent-700: #b45309; /* Status */ --tp-success-50: #f0fdf4; --tp-success-500: #22c55e; --tp-success-600: #16a34a; --tp-success-700: #15803d; --tp-warning-50: #fffbeb; --tp-warning-500: #f59e0b; --tp-warning-700: #b45309; --tp-danger-50: #fef2f2; --tp-danger-500: #ef4444; --tp-danger-600: #dc2626; --tp-danger-700: #b91c1c; --tp-info-50: #eff6ff; --tp-info-500: #3b82f6; --tp-info-700: #1d4ed8; /* ---------------------------------------------------------------- * * 2. NON-COLOUR TOKENS - identical across themes. * * ---------------------------------------------------------------- */ /* Spacing - 4px base, geometric-ish progression */ --tp-space-0: 0; --tp-space-1: 0.25rem; /* 4px */ --tp-space-2: 0.5rem; /* 8px */ --tp-space-3: 0.75rem; /* 12px */ --tp-space-4: 1rem; /* 16px */ --tp-space-5: 1.5rem; /* 24px */ --tp-space-6: 2rem; /* 32px */ --tp-space-7: 2.5rem; /* 40px */ --tp-space-8: 3rem; /* 48px */ --tp-space-9: 4rem; /* 64px */ /* Radii */ --tp-radius-sm: 0.25rem; --tp-radius-md: 0.5rem; --tp-radius-lg: 0.75rem; --tp-radius-xl: 1rem; --tp-radius-pill: 999px; /* Border widths */ --tp-border-thin: 1px; --tp-border-thick: 2px; /* Motion - short, purposeful, and respectful of reduced-motion */ --tp-ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --tp-ease-emphasis: cubic-bezier(0.3, 0, 0, 1); --tp-duration-fast: 120ms; --tp-duration-base: 200ms; --tp-duration-slow: 320ms; /* Shell geometry - consumed by the responsive layout */ --tp-sidebar-width: 16rem; --tp-topbar-height: 3.5rem; --tp-bottomnav-height: 3.75rem; --tp-content-max: 80rem; /* Layering */ --tp-z-base: 0; --tp-z-sticky: 100; --tp-z-sidebar: 200; --tp-z-bottomnav: 300; --tp-z-overlay: 400; --tp-z-dialog: 500; --tp-z-toast: 600; /* Focus ring - one definition, used everywhere */ --tp-focus-ring-width: 3px; } /* ================================================================== * * SEMANTIC LAYER - LIGHT (default) * * Defined on bare :root so a theme-less document is always complete. * * ================================================================== */ :root { --tp-bg-canvas: var(--tp-neutral-100); --tp-bg-surface: var(--tp-neutral-0); --tp-bg-surface-alt: var(--tp-neutral-50); --tp-bg-raised: var(--tp-neutral-0); --tp-bg-sunken: var(--tp-neutral-100); --tp-bg-inverse: var(--tp-neutral-900); --tp-bg-hover: var(--tp-neutral-100); --tp-bg-active: var(--tp-neutral-200); --tp-text-primary: var(--tp-neutral-900); --tp-text-secondary: var(--tp-neutral-600); --tp-text-muted: var(--tp-neutral-500); --tp-text-inverse: var(--tp-neutral-0); --tp-text-on-brand: var(--tp-neutral-0); --tp-text-link: var(--tp-primary-700); --tp-border-subtle: var(--tp-neutral-200); --tp-border-default: var(--tp-neutral-300); --tp-border-strong: var(--tp-neutral-400); --tp-brand: var(--tp-primary-600); --tp-brand-hover: var(--tp-primary-700); --tp-brand-active: var(--tp-primary-800); --tp-brand-subtle: var(--tp-primary-50); --tp-brand-on-subtle: var(--tp-primary-800); --tp-accent: var(--tp-accent-600); --tp-accent-subtle: var(--tp-accent-50); --tp-success: var(--tp-success-600); --tp-success-subtle: var(--tp-success-50); --tp-warning: var(--tp-warning-500); --tp-warning-subtle: var(--tp-warning-50); --tp-danger: var(--tp-danger-600); --tp-danger-subtle: var(--tp-danger-50); --tp-info: var(--tp-info-500); --tp-info-subtle: var(--tp-info-50); --tp-focus-ring: color-mix(in srgb, var(--tp-primary-500) 45%, transparent); --tp-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05); --tp-shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06); --tp-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06); --tp-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08); --tp-shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.10); /* Public site surfaces. A brighter page than the app canvas, hairline borders, and a faint brand wash for the hero. */ --tp-pub-page: var(--tp-neutral-0); --tp-pub-band: var(--tp-neutral-50); --tp-pub-card: var(--tp-neutral-0); --tp-pub-hairline: rgb(15 23 42 / 0.09); --tp-pub-hairline-strong: rgb(15 23 42 / 0.16); --tp-pub-glow: color-mix(in srgb, var(--tp-primary-200) 55%, transparent); --tp-pub-ink: var(--tp-neutral-950); --tp-pub-header: rgb(255 255 255 / 0.78); color-scheme: light; } /* ================================================================== * * SEMANTIC LAYER - DARK * * Applied for an explicit choice, and for system-dark unless the * * viewer has explicitly chosen light. * * ================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tp-bg-canvas: var(--tp-neutral-950); --tp-bg-surface: var(--tp-neutral-900); --tp-bg-surface-alt: var(--tp-neutral-800); --tp-bg-raised: var(--tp-neutral-800); --tp-bg-sunken: var(--tp-neutral-950); --tp-bg-inverse: var(--tp-neutral-50); --tp-bg-hover: var(--tp-neutral-800); --tp-bg-active: var(--tp-neutral-700); --tp-text-primary: var(--tp-neutral-50); --tp-text-secondary: var(--tp-neutral-300); --tp-text-muted: var(--tp-neutral-400); --tp-text-inverse: var(--tp-neutral-900); --tp-text-on-brand: var(--tp-neutral-950); --tp-text-link: var(--tp-primary-300); --tp-border-subtle: var(--tp-neutral-800); --tp-border-default: var(--tp-neutral-700); --tp-border-strong: var(--tp-neutral-600); --tp-brand: var(--tp-primary-400); --tp-brand-hover: var(--tp-primary-300); --tp-brand-active: var(--tp-primary-200); --tp-brand-subtle: color-mix(in srgb, var(--tp-primary-500) 16%, transparent); --tp-brand-on-subtle: var(--tp-primary-200); --tp-accent: var(--tp-accent-300); --tp-accent-subtle: color-mix(in srgb, var(--tp-accent-500) 16%, transparent); --tp-success: var(--tp-success-500); --tp-success-subtle: color-mix(in srgb, var(--tp-success-500) 16%, transparent); --tp-warning: var(--tp-warning-500); --tp-warning-subtle: color-mix(in srgb, var(--tp-warning-500) 16%, transparent); --tp-danger: var(--tp-danger-500); --tp-danger-subtle: color-mix(in srgb, var(--tp-danger-500) 18%, transparent); --tp-info: var(--tp-info-500); --tp-info-subtle: color-mix(in srgb, var(--tp-info-500) 16%, transparent); --tp-focus-ring: color-mix(in srgb, var(--tp-primary-400) 50%, transparent); /* Dark surfaces read depth from lighter borders more than from shadow. */ --tp-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30); --tp-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); --tp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35); --tp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.50), 0 4px 6px -4px rgb(0 0 0 / 0.40); --tp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.45); --tp-pub-page: var(--tp-neutral-950); --tp-pub-band: color-mix(in srgb, var(--tp-neutral-900) 55%, var(--tp-neutral-950)); --tp-pub-card: var(--tp-neutral-900); --tp-pub-hairline: rgb(255 255 255 / 0.08); --tp-pub-hairline-strong: rgb(255 255 255 / 0.16); --tp-pub-glow: color-mix(in srgb, var(--tp-primary-700) 35%, transparent); --tp-pub-ink: var(--tp-neutral-0); --tp-pub-header: rgb(2 6 23 / 0.72); color-scheme: dark; } } /* An explicit dark choice must win regardless of the system setting. */ :root[data-theme="dark"] { --tp-bg-canvas: var(--tp-neutral-950); --tp-bg-surface: var(--tp-neutral-900); --tp-bg-surface-alt: var(--tp-neutral-800); --tp-bg-raised: var(--tp-neutral-800); --tp-bg-sunken: var(--tp-neutral-950); --tp-bg-inverse: var(--tp-neutral-50); --tp-bg-hover: var(--tp-neutral-800); --tp-bg-active: var(--tp-neutral-700); --tp-text-primary: var(--tp-neutral-50); --tp-text-secondary: var(--tp-neutral-300); --tp-text-muted: var(--tp-neutral-400); --tp-text-inverse: var(--tp-neutral-900); --tp-text-on-brand: var(--tp-neutral-950); --tp-text-link: var(--tp-primary-300); --tp-border-subtle: var(--tp-neutral-800); --tp-border-default: var(--tp-neutral-700); --tp-border-strong: var(--tp-neutral-600); --tp-brand: var(--tp-primary-400); --tp-brand-hover: var(--tp-primary-300); --tp-brand-active: var(--tp-primary-200); --tp-brand-subtle: color-mix(in srgb, var(--tp-primary-500) 16%, transparent); --tp-brand-on-subtle: var(--tp-primary-200); --tp-accent: var(--tp-accent-300); --tp-accent-subtle: color-mix(in srgb, var(--tp-accent-500) 16%, transparent); --tp-success: var(--tp-success-500); --tp-success-subtle: color-mix(in srgb, var(--tp-success-500) 16%, transparent); --tp-warning: var(--tp-warning-500); --tp-warning-subtle: color-mix(in srgb, var(--tp-warning-500) 16%, transparent); --tp-danger: var(--tp-danger-500); --tp-danger-subtle: color-mix(in srgb, var(--tp-danger-500) 18%, transparent); --tp-info: var(--tp-info-500); --tp-info-subtle: color-mix(in srgb, var(--tp-info-500) 16%, transparent); --tp-focus-ring: color-mix(in srgb, var(--tp-primary-400) 50%, transparent); --tp-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30); --tp-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); --tp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35); --tp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.50), 0 4px 6px -4px rgb(0 0 0 / 0.40); --tp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.45); --tp-pub-page: var(--tp-neutral-950); --tp-pub-band: color-mix(in srgb, var(--tp-neutral-900) 55%, var(--tp-neutral-950)); --tp-pub-card: var(--tp-neutral-900); --tp-pub-hairline: rgb(255 255 255 / 0.08); --tp-pub-hairline-strong: rgb(255 255 255 / 0.16); --tp-pub-glow: color-mix(in srgb, var(--tp-primary-700) 35%, transparent); --tp-pub-ink: var(--tp-neutral-0); --tp-pub-header: rgb(2 6 23 / 0.72); color-scheme: dark; }