/* ==========================================================================
   WagonPulse — Design Tokens
   Palette sampled directly from images/logo.png:
     navy  #003060 / #001848  · cyan #48C0F0 / #78D8F0 · lime #A8D818 · spark #F09000
   ========================================================================== */

:root {
  /* Brand core */
  --navy-900:    #001233;
  --navy-800:    #001848;
  --navy-700:    #002C5F;   /* primary dark — dominant logo hue */
  --navy-600:    #053C78;
  --navy-500:    #0E5C99;

  --cyan-600:    #0E8FC9;
  --cyan-500:    #17B4E8;   /* primary accent */
  --cyan-400:    #48C0F0;
  --cyan-300:    #78D8F0;

  --lime-600:    #8DBC10;
  --lime-500:    #A5D818;   /* "pulse" / go accent */
  --lime-400:    #BCE84A;

  --spark-500:   #F59100;   /* orange spark — used sparingly */

  /* Semantic */
  --color-primary:     var(--navy-700);
  --color-accent:      var(--cyan-500);
  --color-pulse:       var(--lime-500);
  --color-on-primary:  #ffffff;

  --color-bg:          #F4F8FC;   /* neutral page background */
  --color-surface:     #FFFFFF;
  --color-surface-2:   #EEF4FA;
  --color-ink:         #0A1A2F;   /* body text */
  --color-ink-muted:   #51617A;   /* secondary text — >=4.5:1 on surface */
  --color-border:      #DCE6F0;
  --color-border-soft: #E9F0F7;

  /* Dark sections */
  --dark-bg:           #001233;
  --dark-surface:      #04204A;
  --dark-ink:          #EAF2FB;
  --dark-ink-muted:    #9DB4D0;
  --dark-border:       rgba(120, 216, 240, 0.16);

  /* Gradients */
  --gradient-hero:   linear-gradient(135deg, #001233 0%, #002C5F 45%, #0E5C99 100%);
  --gradient-pulse:  linear-gradient(120deg, var(--cyan-500) 0%, var(--lime-500) 100%);
  --gradient-accent: linear-gradient(120deg, var(--navy-700) 0%, var(--cyan-500) 100%);
  --gradient-text:   linear-gradient(100deg, #78D8F0 0%, #A5D818 100%);

  /* Focus */
  --focus-ring:       0 0 0 3px rgba(23, 180, 232, 0.45);
  --focus-ring-color: var(--cyan-500);

  /* Type */
  --font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-300: 0.875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.375rem;
  --fs-700: 1.875rem;
  --fs-800: 2.6rem;
  --fs-900: clamp(2.6rem, 5.2vw, 4.25rem);

  --lh-tight:  1.12;
  --lh-snug:   1.3;
  --lh-normal: 1.65;

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

  /* Spacing — 8pt scale */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; --sp-16: 128px;

  /* Layout & motion */
  --container-max: 1200px;
  --container-pad: 24px;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 18, 51, 0.06);
  --shadow:    0 12px 32px rgba(0, 18, 51, 0.09);
  --shadow-lg: 0 28px 64px rgba(0, 18, 51, 0.16);
  --shadow-glow: 0 18px 60px rgba(23, 180, 232, 0.30);

  --transition: 200ms ease;
  --transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-navbar: 1000;
}