/* GENERATED by packages/ui/src/tokens.gen.py - DO NOT EDIT BY HAND.
   Source: design/specs/VUELTIC_Design_Spec_v2.md, section "2. Design tokens".
   Drift is caught by: python3 packages/ui/src/tokens.gen.py --check (exit 2). */

/* The full light palette sits on bare :root. The dark theme REDEFINES only the
   tokens that depend on it, and does so twice: once under the system
   preference (unless an explicit choice said "light"), once under an explicit
   data-theme="dark". That way an explicit choice wins in both directions.

   The spec is dark-first: dark is the default mode for most screens and is
   mandatory on Live Mirror. The app turns it on by setting data-theme="dark"
   on <html>; the values of both themes are pinned here. */
:root {
  /* ---- 2.1 Brand colours ---- */
  --vt-brand-volt: #F15B2C; /* Primary fills, primary buttons, big metric outlines, focused ring */
  --vt-brand-volt-deep: #C9421A; /* Text-on-light variant (AA on light surfaces) */
  --vt-brand-volt-tint: #F47A53; /* Hover/pressed on dark */
  --vt-brand-volt-wash: #F15B2C1F; /* Chip backgrounds on dark */
  --vt-brand-volt-wash-light: #F15B2C14; /* Chip backgrounds on light */
  --vt-brand-cyan: #38E1FF; /* Data viz secondary, live HR halo, GPS-fix indicator */
  --vt-brand-cyan-deep: #006C86; /* Text-on-light cyan */
  --vt-on-brand-volt: #15181C; /* Text/icons over Volt - never white on Volt */
  --vt-on-brand-cyan: #15181C; /* Text/icons over Cyan */
  --vt-chip-volt-wash: #F15B2C14; /* Volt chip background, resolved per theme */

  /* ---- 2.2 / 2.3 Neutral palette ---- */
  --vt-bg: #FAFAFA; /* Scaffold background, full-screen modals */
  --vt-surface-1: #FFFFFF; /* Cards, sheets, primary content surface */
  --vt-surface-2: #F2F4F7; /* Raised cards, hovered tiles, app bar on scroll */
  --vt-surface-3: #E7EAEF; /* Modal headers, top of bottom sheet, selected chip */
  --vt-surface-scrim: #0E10138C; /* Dialog scrim */
  --vt-border-subtle: #0E10131A; /* Card outline, divider */
  --vt-border-strong: #0E101333; /* Focus ring fallback, input border */
  --vt-text-primary: #0E1013; /* Body, big metrics */
  --vt-text-secondary: #3A4150; /* Labels */
  --vt-text-muted: #6B7280; /* Captions, disabled hints (AA only) */
  --vt-text-disabled: #A0A8B4; /* Decorative only */

  /* ---- 2.4 Semantic colours ---- */
  --vt-success: #15803D; /* Target met, lap saved, paired OK */
  --vt-warning: #B45309; /* Low battery, weak GPS - never combined with Volt fill */
  --vt-error: #B91C1C; /* BLE disconnected, save fail */
  --vt-info: #006C86; /* Tips, neutral messages */

  /* ---- 2.5 HR zones (always paired with the Z1-Z5 label) ---- */
  --vt-zone-1: #1E40AF; /* Recovery, 50-60% HRmax */
  --vt-zone-2: #15803D; /* Endurance, 60-70% HRmax */
  --vt-zone-3: #A16207; /* Aerobic, 70-80% HRmax */
  --vt-zone-4: #C2410C; /* Threshold, 80-90% HRmax */
  --vt-zone-5: #B91C1C; /* Anaerobic, 90-100% HRmax */

  /* ---- 2.6 Data viz palette ---- */
  --vt-viz-speed: #C9421A;
  --vt-viz-hr: #B91C1C;
  --vt-viz-cadence: #006C86;
  --vt-viz-distance-pace: #5B21B6;
  --vt-viz-elevation: #475569;

  /* ---- 2.7 Font families (see MANUAL note in the generator) ---- */
  --vt-font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vt-font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --vt-font-mono: 'Space Grotesk', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* ---- 2.7 Type scale ---- */
  --vt-font-size-display-xl: 96px;
  --vt-line-height-display-xl: 1;
  --vt-font-weight-display-xl: 700;
  --vt-tracking-display-xl: -0.04em;
  --vt-font-size-display-l: 72px;
  --vt-line-height-display-l: 1;
  --vt-font-weight-display-l: 700;
  --vt-tracking-display-l: -0.04em;
  --vt-font-size-display-m: 48px;
  --vt-line-height-display-m: 1.05;
  --vt-font-weight-display-m: 700;
  --vt-tracking-display-m: -0.03em;
  --vt-font-size-display-s: 40px;
  --vt-line-height-display-s: 1.1;
  --vt-font-weight-display-s: 700;
  --vt-tracking-display-s: -0.02em;
  --vt-font-size-headline-l: 32px;
  --vt-line-height-headline-l: 1.15;
  --vt-font-weight-headline-l: 700;
  --vt-tracking-headline-l: -0.02em;
  --vt-font-size-headline-m: 24px;
  --vt-line-height-headline-m: 1.2;
  --vt-font-weight-headline-m: 600;
  --vt-tracking-headline-m: -0.01em;
  --vt-font-size-headline-s: 20px;
  --vt-line-height-headline-s: 1.25;
  --vt-font-weight-headline-s: 600;
  --vt-tracking-headline-s: 0;
  --vt-font-size-body-l: 17px;
  --vt-line-height-body-l: 1.45;
  --vt-font-weight-body-l: 400;
  --vt-tracking-body-l: 0;
  --vt-font-size-body-m: 15px;
  --vt-line-height-body-m: 1.45;
  --vt-font-weight-body-m: 400;
  --vt-tracking-body-m: 0;
  --vt-font-size-caption: 13px;
  --vt-line-height-caption: 1.4;
  --vt-font-weight-caption: 500;
  --vt-tracking-caption: 0.01em;
  --vt-font-size-overline: 11px;
  --vt-line-height-overline: 1.3;
  --vt-font-weight-overline: 500;
  --vt-tracking-overline: 0.08em;
  --vt-font-size-mono-timer: 56px;
  --vt-line-height-mono-timer: 1;
  --vt-font-weight-mono-timer: 500;
  --vt-tracking-mono-timer: -0.02em;

  /* ---- 2.8 Spacing ---- */
  --vt-space-0: 0;
  --vt-space-1: 4px; /* Inner icon padding */
  --vt-space-2: 8px; /* Tight gap inside chip */
  --vt-space-3: 12px; /* Between metric label and value */
  --vt-space-4: 16px; /* Default card padding (compact) */
  --vt-space-5: 20px; /* Between cards */
  --vt-space-6: 24px; /* Section gap, default tablet card padding */
  --vt-space-7: 32px; /* Screen edge on tablet */
  --vt-space-8: 40px; /* Hero spacing */
  --vt-space-9: 56px; /* Top of Live Mirror */
  --vt-screen-margin-compact: 16px;
  --vt-screen-margin-medium: 24px;
  --vt-screen-margin-expanded: 32px;
  --vt-screen-margin-large: 64px;

  /* ---- 2.9 Radius ---- */
  --vt-radius-xs: 4px; /* Tag/chip */
  --vt-radius-sm: 8px; /* Small button */
  --vt-radius-md: 12px; /* Input field, secondary card */
  --vt-radius-lg: 16px; /* Primary card */
  --vt-radius-xl: 24px; /* Hero card, big metric tile */
  --vt-radius-2xl: 32px; /* Bottom sheet handle, FAB pill */
  --vt-radius-full: 9999px; /* Pills, avatar, big-circle CTA */

  /* ---- 2.10 Elevation ---- */
  --vt-elevation-0: none;
  --vt-elevation-1: 0 1px 2px #0E10130D;
  --vt-elevation-2: 0 4px 8px #0E101314;
  --vt-elevation-3: 0 12px 24px #0E10131F;

  /* ---- 2.11 Motion ---- */
  --vt-motion-tap-duration: 100ms; /* Button press feedback */
  --vt-motion-tap-ease: cubic-bezier(0.25, 1, 0.5, 1); /* easeOutQuart */
  --vt-motion-fast-duration: 200ms; /* Toggle, chip select */
  --vt-motion-fast-ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic */
  --vt-motion-std-duration: 300ms; /* Sheet open, screen push */
  --vt-motion-std-ease: cubic-bezier(0.2, 0, 0, 1); /* emphasized */
  --vt-motion-slow-duration: 500ms; /* Hero metric morph (km/h ↔ split) */
  --vt-motion-slow-ease: cubic-bezier(0.05, 0.7, 0.1, 1); /* emphasizedDecel */
  --vt-motion-pulse-duration: 800ms; /* Live HR halo, recording dot */
  --vt-motion-pulse-ease: cubic-bezier(0.42, 0, 0.58, 1); /* easeInOut */
  --vt-motion-logo-dot-duration: 1000ms;
  --vt-motion-logo-trace-duration: 1400ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ---- 2.1 Brand colours ---- */
    --vt-chip-volt-wash: #F15B2C1F;

    /* ---- 2.2 / 2.3 Neutral palette ---- */
    --vt-bg: #0E1013;
    --vt-surface-1: #15181C;
    --vt-surface-2: #1C2026;
    --vt-surface-3: #242931;
    --vt-surface-scrim: #00000066;
    --vt-border-subtle: #FFFFFF14;
    --vt-border-strong: #FFFFFF33;
    --vt-text-primary: #F5F7FA;
    --vt-text-secondary: #B8C0CC;
    --vt-text-muted: #7B8595;
    --vt-text-disabled: #4A5260;

    /* ---- 2.4 Semantic colours ---- */
    --vt-success: #22C55E;
    --vt-warning: #F59E0B;
    --vt-error: #EF4444;
    --vt-info: #38E1FF;

    /* ---- 2.5 HR zones (always paired with the Z1-Z5 label) ---- */
    --vt-zone-1: #7AB8FF;
    --vt-zone-2: #4ADE80;
    --vt-zone-3: #FACC15;
    --vt-zone-4: #FB923C;
    --vt-zone-5: #EF4444;

    /* ---- 2.6 Data viz palette ---- */
    --vt-viz-speed: #F15B2C;
    --vt-viz-hr: #EF4444;
    --vt-viz-cadence: #38E1FF;
    --vt-viz-distance-pace: #A78BFA;
    --vt-viz-elevation: #94A3B8;

    /* ---- 2.10 Elevation ---- */
    --vt-elevation-1: none;
    --vt-elevation-2: inset 0 1px 0 #FFFFFF0A;
    --vt-elevation-3: inset 0 1px 0 #FFFFFF14;
  }
}

/* The same block under an explicit choice: the system preference may be
   light while Live Mirror still has to be dark. */
:root[data-theme="dark"] {
  /* ---- 2.1 Brand colours ---- */
  --vt-chip-volt-wash: #F15B2C1F;

  /* ---- 2.2 / 2.3 Neutral palette ---- */
  --vt-bg: #0E1013;
  --vt-surface-1: #15181C;
  --vt-surface-2: #1C2026;
  --vt-surface-3: #242931;
  --vt-surface-scrim: #00000066;
  --vt-border-subtle: #FFFFFF14;
  --vt-border-strong: #FFFFFF33;
  --vt-text-primary: #F5F7FA;
  --vt-text-secondary: #B8C0CC;
  --vt-text-muted: #7B8595;
  --vt-text-disabled: #4A5260;

  /* ---- 2.4 Semantic colours ---- */
  --vt-success: #22C55E;
  --vt-warning: #F59E0B;
  --vt-error: #EF4444;
  --vt-info: #38E1FF;

  /* ---- 2.5 HR zones (always paired with the Z1-Z5 label) ---- */
  --vt-zone-1: #7AB8FF;
  --vt-zone-2: #4ADE80;
  --vt-zone-3: #FACC15;
  --vt-zone-4: #FB923C;
  --vt-zone-5: #EF4444;

  /* ---- 2.6 Data viz palette ---- */
  --vt-viz-speed: #F15B2C;
  --vt-viz-hr: #EF4444;
  --vt-viz-cadence: #38E1FF;
  --vt-viz-distance-pace: #A78BFA;
  --vt-viz-elevation: #94A3B8;

  /* ---- 2.10 Elevation ---- */
  --vt-elevation-1: none;
  --vt-elevation-2: inset 0 1px 0 #FFFFFF0A;
  --vt-elevation-3: inset 0 1px 0 #FFFFFF14;
}