/* ==========================================================================
   Kortex Audio — Design Tokens
   Source of truth: Brand/Kortex_Brand_Bible.md §4–5, §9
   Shared :root for every section. Cyan = signal (~70%), Magenta = heat (~30%).
   ========================================================================== */

:root {
  /* ---- Palette (inherited Multiverse tokens) ---- */
  --kx-cyan:          #00f0ff;   /* signal / primary */
  --kx-cyan-soft:     #a4f4ff;
  --kx-magenta:       #ff00ff;   /* heat / accent */
  --kx-magenta-soft:  #ff4cff;
  --kx-deep-blue:     #015aff;
  --kx-mid-blue:      #2787ff;
  --kx-violet:        #4c128e;

  --kx-bg:            #020408;    /* absolute night */
  --kx-bg-2:          #030712;    /* panel */
  --kx-bg-3:          #050a14;    /* inset */
  --kx-bg-elev:       rgba(2, 12, 28, .85);   /* glass panel */

  --kx-fg:            #effbff;    /* primary text */
  --kx-fg-2:          rgba(224, 247, 255, .92);
  --kx-fg-3:          rgba(220, 240, 255, .82);
  --kx-fg-4:          rgba(220, 240, 255, .55);

  --kx-border:        rgba(0, 240, 255, .22);
  --kx-border-strong: rgba(0, 240, 255, .45);
  --kx-border-mg:     rgba(255, 0, 255, .32);

  /* semantic */
  --kx-ok:    #4cffb3;
  --kx-warn:  #ffb84c;
  --kx-danger:#ff4c8a;

  /* ---- Signatures / glow ---- */
  --kx-glow-cyan:     0 0 18px rgba(0, 240, 255, .55), 0 0 54px rgba(39, 135, 255, .36);
  --kx-glow-cyan-sm:  0 0 12px rgba(0, 240, 255, .5);
  --kx-glow-magenta:  0 0 14px rgba(255, 0, 255, .55), 0 0 36px rgba(255, 0, 255, .25);
  --kx-grad-portal:   linear-gradient(135deg, #00f0ff, #ff00ff);
  --kx-grad-signal:   linear-gradient(90deg, #00f0ff, #2787ff);

  /* ---- Type ---- */
  --kx-disp:  'Space Grotesk', system-ui, -apple-system, sans-serif;  /* display + body */
  --kx-mono:  'JetBrains Mono', ui-monospace, monospace;              /* data / labels */

  --fs-hero:     clamp(2.8rem, 9vw, 7rem);
  --fs-display:  clamp(2.4rem, 7vw, 5rem);
  --fs-h2:       clamp(1.9rem, 4.5vw, 3.2rem);
  --fs-h3:       clamp(1.25rem, 2.4vw, 1.7rem);
  --fs-eyebrow:  clamp(.7rem, 1.4vw, .82rem);
  --fs-body:     clamp(.95rem, 1.2vw, 1.06rem);
  --fs-small:    .82rem;

  /* ---- Motion (family tokens) ---- */
  --ease-in:   cubic-bezier(.16, 1, .3, 1);   /* entrances */
  --ease-move: cubic-bezier(.2, .7, .2, 1);   /* moves */
  --t-fast:   180ms;
  --t-med:    250ms;
  --t-slow:   420ms;

  /* ---- Layout ---- */
  --maxw: 1180px;
  --gutter: clamp(18px, 4vw, 48px);
  --radius: 16px;
  --radius-sm: 12px;
}