/* Revontulet — design tokens
 * Theme: aurora borealis over the polar night (revontulet = Finnish "fox fires").
 * Dark-first. Sport + HR/power zone scales carried exactly from the product mockups.
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Permanent+Marker&display=swap');

:root {
  /* ---- Polar-night neutrals ---- */
  --night-950: #070809;
  --night-900: #0C0E11;
  --night-850: #121316;
  --night-800: #17191D;
  --night-700: #202226;
  --night-600: #2B2E33;
  --night-500: #3A3D43;
  --night-400: #4E525A;
  --frost-300: #868A92;
  --frost-200: #AEB2BA;
  --frost-100: #DADCE1;
  --frost-50:  #F0F1F4;
  --snow:      #FFFFFF;

  /* ---- Aurora band (brand spectrum) ---- */
  --aurora-green:   #3DDC84;
  --aurora-green-deep: #23A866;
  --aurora-teal:    #2DD4BF;
  --aurora-cyan:    #38BDF8;
  --aurora-blue:    #6172F3;
  --aurora-violet:  #A66BF0;
  --aurora-magenta: #EC5B9C;
  --aurora-rose:    #F0617F;

  /* ---- Fox (warm counter-accent) ---- */
  --fox-500: #F97316;
  --fox-400: #FB923C;
  --fox-300: #FDBA74;

  /* ---- Aurora gradients ---- */
  --grad-aurora: linear-gradient(105deg, #3DDC84 0%, #2DD4BF 34%, #38BDF8 60%, #A66BF0 100%);
  --grad-aurora-full: linear-gradient(105deg, #3DDC84 0%, #2DD4BF 26%, #38BDF8 48%, #6172F3 68%, #A66BF0 84%, #EC5B9C 100%);
  --grad-night: linear-gradient(180deg, #0C0E11 0%, #070809 100%);
  --grad-fox: linear-gradient(100deg, #FB923C 0%, #F0617F 100%);

  /* ---- Sport accents (exact from product mockups) ---- */
  --sport-run:  #EA6B66;
  --sport-bike: #67AB9F;
  --sport-swim: #7EA6E0;
  --sport-golf:   #9BC26B;
  --sport-ppg:    #E0A458;
  --sport-yoga:   #B98FD9;
  --sport-cardio: #E8799B;
  --sport-triathlon: #6172F3;
  --sport-run-tint:  rgba(234,107,102,0.16);
  --sport-bike-tint: rgba(103,171,159,0.16);
  --sport-swim-tint: rgba(126,166,224,0.16);
  --sport-golf-tint:   rgba(155,194,107,0.16);
  --sport-ppg-tint:    rgba(224,164,88,0.16);
  --sport-yoga-tint:   rgba(185,143,217,0.16);
  --sport-cardio-tint: rgba(232,121,155,0.16);
  --sport-triathlon-tint: rgba(97,114,243,0.16);

  /* ---- Route novelty (Known/New segments on a session map, epic Routes
     SPOR-410, addendum SPOR-417/420/423) : couleurs FIXES, independantes du
     sport — demande explicite de l'utilisateur, apres qu'un premier essai
     (couleur du sport pour "Known") se soit revele trop proche de la
     couleur "New" sur certains sports (ex. Run #EA6B66 vs l'ancienne
     couleur "New"). Vert/rouge vif, contraste volontairement fort entre
     les deux, choisi pour ne pas se confondre avec aucune des teintes
     --sport-* ci-dessus (y compris des sports personnalises a venir). Ne
     s'applique PAS aux seances triathlon/multisport (session_detail.php
     garde alors la couleur --sport-triathlon, demande explicite). */
  --route-known: #22C55E;
  --route-new:   #EF4444;

  /* ---- HR / power zones Z1..Z8 (SPOR-333, zones configurables jusqu'a 8) ---- */
  --zone-1: #74D68A;
  --zone-2: #8FD9D2;
  --zone-3: #7FA9E8;
  --zone-4: #F6C08A;
  --zone-5: #C9DB4E;
  --zone-6: #F0736E;
  --zone-7: #B98FE0;
  --zone-8: #E07FA0;

  /* ---- Semantic status ---- */
  --status-success: #3DDC84;
  --status-info:    #38BDF8;
  --status-warn:    #F6B24B;
  --status-danger:  #F0617F;

  /* ---- Semantic aliases ---- */
  --bg-app:        var(--night-900);
  --bg-sunk:       var(--night-950);
  --surface-raised: var(--night-800);
  --surface-card:   var(--night-700);
  --surface-hover:  var(--night-600);

  --border-subtle: rgba(255,255,255,0.06);
  --border-default: var(--night-500);
  --border-strong: var(--night-400);

  --text-primary:   var(--frost-50);
  --text-secondary: var(--frost-200);
  --text-muted:     var(--frost-300);
  --text-inverse:   var(--night-950);
  --text-on-accent: var(--night-950);

  --accent:        var(--aurora-green);
  --accent-hover:  #52E698;
  --accent-press:  var(--aurora-green-deep);
  --focus-ring:    rgba(61,220,132,0.55);

  --link:          var(--aurora-cyan);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-brush:   'Permanent Marker', 'Space Grotesk', cursive;

  --fs-display-xl: 4.5rem;
  --fs-display-l:  3.375rem;
  --fs-display-m:  2.5rem;
  --fs-h1: 2rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-body-sm: 0.8125rem;
  --fs-caption: 0.6875rem;
  --fs-metric-xl: 3rem;
  --fs-metric-l:  2rem;
  --fs-metric-m:  1.375rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.14em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing (4px grid) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max: 1200px;
  --sidebar-w: 234px;
  --app-max: 1440px;
  --gutter: 24px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-card: 14px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(3,6,12,0.5);
  --shadow-md: 0 6px 18px -6px rgba(3,6,12,0.7);
  --shadow-lg: 0 20px 48px -16px rgba(3,6,12,0.8);
  --shadow-pop: 0 24px 64px -20px rgba(3,6,12,0.85);

  --glow-green: 0 0 0 1px rgba(61,220,132,0.4), 0 0 28px -6px rgba(61,220,132,0.55);
  --glow-cyan:  0 0 28px -8px rgba(56,189,248,0.6);
  --glow-violet:0 0 28px -8px rgba(166,107,240,0.55);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-aurora: 14s;
}