/* ============================================================
   HAVA.SI — Design tokens  ·  "Crimson Infrared"
   ============================================================ */
:root {
  /* ── Color ── */
  --void:      #030305;   /* deeper black — glows and panels pop harder */
  --void-2:    #07070a;
  --surface:   #14141a;
  --elevated:  #1c1c22;
  --border:    #26262e;
  --border-2:  #34343e;
  --blood:     #8a0f1f;
  --red:       #ff2d3f;
  --red-deep:  #d11128;
  --neon:      #ff2a6d;
  --neon-soft: #ff8aa8;
  --text:      #eef0f4;
  --text-dim:  #b9b9c2;
  --muted:     #8b8b95;
  --muted-2:   #5a5a63;

  /* ── cold counterpoint (temperature contrast → red reads hotter) ── */
  --ice:       #38e8ff;   /* electric cyan */
  --ice-deep:  #0a93b8;
  --violet:    #6d4bff;   /* deep ambient violet for shadows */

  /* gradients / glows */
  --grad-accent: linear-gradient(135deg, var(--red) 0%, var(--neon) 100%);
  --grad-cold:   linear-gradient(135deg, var(--ice) 0%, var(--violet) 100%);
  --glow-red:    0 0 28px color-mix(in srgb, var(--red) 45%, transparent);
  --glow-neon:   0 0 22px color-mix(in srgb, var(--neon) 60%, transparent);
  --glow-ice:    0 0 22px rgba(56,232,255,.5);

  /* ── Type ── */
  --f-display: 'Clash Display', system-ui, sans-serif;
  --f-body:    'Space Grotesk', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;
  --f-hand:    'Reenie Beanie', cursive;

  /* fluid scale */
  --t-hero:   clamp(3rem, 8vw, 7rem);
  --t-h2:     clamp(2.2rem, 4.5vw, 3.6rem);
  --t-h3:     clamp(1.2rem, 2vw, 1.6rem);
  --t-body:   clamp(.95rem, 1.1vw, 1.0625rem);
  --t-small:  .8125rem;
  --t-label:  .6875rem;

  /* ── Space ── */
  --gut:    clamp(1.25rem, 4vw, 4rem);   /* page gutter */
  --sp-sec: clamp(5rem, 12vh, 10rem);    /* section padding-block */
  --maxw:   1240px;

  /* ── Motion ── */
  --e-smooth: cubic-bezier(.4, 0, .2, 1);
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ── Layers ── */
  --z-digits-back: 1;
  --z-scene:       2;
  --z-digits-front:3;
  --z-content:     10;
  --z-nav:         100;
  --z-loader:      1000;
  --z-cursor:      9999;

  --radius: 4px;
}