/* HOMIUM Design System — Tokens */

:root {
  /* Brand */
  --homium-purple:   #290640;
  --homium-cyan:     #00ffff;
  --homium-green:    #5aeaa2;
  --homium-white:    #ffffff;

  /* Purple scale */
  --purple-950: #150220;
  --purple-900: #1d042d;
  --purple-800: #240537;
  --purple-700: #290640;
  --purple-600: #380a55;
  --purple-500: #4a1170;
  --purple-400: #6a2a9c;
  --purple-300: #8e57bf;
  --purple-200: #b48cd6;
  --purple-100: #d8c2ea;
  --purple-50:  #f1e9f7;

  /* Cyan scale */
  --cyan-700: #00b8b8;
  --cyan-600: #00d6d6;
  --cyan-500: #00ffff;
  --cyan-400: #5cffff;
  --cyan-300: #9bffff;

  /* Green scale */
  --green-700: #2bb077;
  --green-600: #3fcc8d;
  --green-500: #5aeaa2;
  --green-400: #8af1bb;

  /* Semantic — dark surface (default) */
  --bg:              var(--homium-purple);
  --bg-elevated:     #380a55;
  --bg-sunken:       #1d042d;
  --surface-overlay: rgba(255,255,255,0.04);

  --fg:              var(--homium-white);
  --fg-muted:        rgba(255,255,255,0.72);
  --fg-subtle:       rgba(255,255,255,0.45);
  --fg-on-cyan:      var(--homium-purple);
  --fg-on-green:     var(--homium-purple);

  --accent:          var(--homium-cyan);
  --accent-2:        var(--homium-green);
  --accent-display:  var(--homium-cyan);

  --link:            var(--homium-cyan);
  --link-hover:      var(--cyan-300);

  --border:          rgba(255,255,255,0.10);
  --border-strong:   rgba(255,255,255,0.22);
  --border-cyan:     rgba(0,255,255,0.35);

  --focus-ring:      var(--homium-cyan);

  /* Score colors */
  --score-high:   var(--homium-green);
  --score-mid:    #f5c842;
  --score-low:    #ff5f5f;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* Spacing (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Shadows / glows */
  --shadow-card:  0 8px 32px rgba(0,0,0,0.35);
  --shadow-lift:  0 18px 48px rgba(0,0,0,0.45);
  --glow-cyan:    0 0 28px rgba(0,255,255,0.40);
  --glow-green:   0 0 20px rgba(90,234,162,0.35);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-med:     260ms;
  --dur-slow:    480ms;

  /* Type */
  --font-sans:    'Rubik', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', monospace;

  --fs-display:  clamp(28px, 4vw, 48px);
  --fs-h1:       32px;
  --fs-h2:       24px;
  --fs-h3:       18px;
  --fs-eyebrow:  11px;
  --fs-body:     15px;
  --fs-body-sm:  13px;
  --fs-caption:  11px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --ls-display: -0.02em;
  --ls-eyebrow:  0.10em;
  --ls-caps:     0.12em;
}