/* =============================================================================
   AUDIOSLICE — DESIGN TOKENS
   -----------------------------------------------------------------------------
   👉 THIS IS THE ONE PLACE TO CUSTOMIZE THE WHOLE SITE.
   Every colour, font, size, space, radius and shadow lives here as a CSS
   custom property (variable). Change a value once and it updates everywhere.
   No build step required — it's plain CSS.

   Palette is derived from the AudioSlice logo: a deep navy canvas, an electric
   blue→cyan "SLICE" glow, and the signature neon rainbow streak
   (yellow · coral · green · magenta · purple) = "Turning Music into Light".
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND COLOURS  (the core identity — tweak these first)
     ------------------------------------------------------------------------- */
  --brand-blue:      #2f7bff;   /* AUDIO — electric blue                       */
  --brand-blue-deep: #1b54e0;   /* pressed / darker blue                       */
  --brand-cyan:      #2fe6ff;   /* SLICE glow — the signature highlight        */
  --brand-cyan-soft: #7af1ff;

  /* Neon rainbow accents (the light streak). Used sparingly for spark + flair */
  --accent-yellow:   #ffd23d;
  --accent-coral:    #ff4d6d;
  --accent-green:    #34e07a;
  --accent-magenta:  #d957ff;
  --accent-purple:   #8b5cf6;

  /* ---------------------------------------------------------------------------
     2. SURFACES & INK  (backgrounds and text)
     ------------------------------------------------------------------------- */
  --bg:           #070b16;   /* page background — matches the logo's canvas    */
  --bg-2:         #0a1020;   /* alternating section background                 */
  --surface:      #0e1626;   /* cards / elevated panels                        */
  --surface-2:    #131e34;   /* hover / nested panels                          */
  --line:         #1e2c47;   /* hairline borders                               */
  --line-soft:    #16223a;

  --ink:          #eaf0ff;   /* primary text                                   */
  --ink-dim:      #a9b8d6;   /* secondary text                                 */
  --ink-faint:    #6f80a3;   /* captions, muted labels                         */
  --ink-on-brand: #ffffff;   /* text on coloured buttons                       */

  /* ---------------------------------------------------------------------------
     3. GRADIENTS  (the "light" effects)
     ------------------------------------------------------------------------- */
  --grad-brand:   linear-gradient(100deg, var(--brand-blue), var(--brand-cyan));
  --grad-rainbow: linear-gradient(100deg,
                    var(--accent-yellow) 0%,
                    var(--accent-coral) 22%,
                    var(--accent-magenta) 44%,
                    var(--accent-purple) 62%,
                    var(--brand-cyan) 82%,
                    var(--brand-blue) 100%);
  --grad-text:    linear-gradient(100deg, var(--brand-cyan-soft), var(--brand-blue));
  --grad-hero:    radial-gradient(120% 90% at 50% -10%,
                    rgba(47,123,255,.22) 0%,
                    rgba(47,230,255,.10) 32%,
                    rgba(7,11,22,0) 70%);
  --grad-glow:    radial-gradient(60% 60% at 50% 0%,
                    rgba(47,230,255,.16), rgba(7,11,22,0) 70%);

  /* ---------------------------------------------------------------------------
     4. TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; /* headings */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* body    */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

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

  /* Fluid type scale — clamp(min, preferred, max). Scales with viewport.      */
  --fs-display:   clamp(2.8rem, 1.6rem + 5.4vw, 5.5rem);  /* hero headline      */
  --fs-h1:        clamp(2.1rem, 1.4rem + 3.0vw, 3.4rem);  /* section titles     */
  --fs-h2:        clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --fs-h3:        clamp(1.15rem, 1.0rem + 0.6vw, 1.4rem);
  --fs-lead:      clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem); /* intro paragraphs  */
  --fs-body:      1.0625rem;   /* 17px base body                               */
  --fs-small:     0.9375rem;
  --fs-caption:   0.8125rem;

  --lh-tight:     1.08;
  --lh-snug:      1.28;
  --lh-body:      1.65;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.14em;   /* eyebrow / label letter-spacing                */

  /* ---------------------------------------------------------------------------
     5. SPACING SCALE  (consistent rhythm)
     ------------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Top is deliberately tighter than bottom: the top gap sits between a section's
     background edge and its eyebrow, where it reads as dead space, while the bottom
     gap does the real work of separating one section's content from the next. */
  --section-pad-top:    clamp(2.75rem, 1.75rem + 3.6vw, 5rem);
  --section-pad-bottom: clamp(3.5rem, 2.25rem + 5vw, 6.5rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 3rem); /* page side padding       */

  /* ---------------------------------------------------------------------------
     6. LAYOUT
     ------------------------------------------------------------------------- */
  --container:     1180px;   /* max content width                             */
  --container-narrow: 760px; /* prose / centred text blocks                   */
  --nav-h:         72px;     /* sticky header height                          */

  /* ---------------------------------------------------------------------------
     7. RADII
     ------------------------------------------------------------------------- */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  30px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     8. SHADOWS & GLOWS
     ------------------------------------------------------------------------- */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.35);
  --shadow:      0 18px 50px -12px rgba(0,0,0,.65);
  --shadow-lg:   0 40px 90px -20px rgba(0,0,0,.7);
  --glow-cyan:   0 0 0 1px rgba(47,230,255,.35), 0 12px 40px -8px rgba(47,230,255,.45);
  --glow-blue:   0 14px 40px -10px rgba(47,123,255,.55);
  --ring:        0 0 0 3px rgba(47,230,255,.35); /* focus ring                 */

  /* ---------------------------------------------------------------------------
     9. MOTION
     ------------------------------------------------------------------------- */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur-fast:   .15s;
  --dur:        .28s;
  --dur-slow:   .6s;

  /* ---------------------------------------------------------------------------
     10. Z-INDEX
     ------------------------------------------------------------------------- */
  --z-nav:    100;
  --z-modal:  200;
  --z-top:    300;
}

/* Respect users who prefer reduced motion — disable non-essential animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}