@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Light.ttf'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-LightItalic.ttf'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Italic.ttf'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Medium.ttf'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-SemiBold.ttf'); font-weight: 600; font-style: normal; }

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

  --purple-950: #150220;
  --purple-900: #1d042d;
  --purple-800: #240537;
  --purple-700: #290640;
  --purple-600: #380a55;
  --purple-500: #4a1170;
  --purple-400: #6a2a9c;
  --purple-300: #8e57bf;

  --cyan-700: #00b8b8;
  --cyan-500: #00ffff;
  --cyan-300: #9bffff;

  --green-500: #5aeaa2;
  --green-400: #8af1bb;

  --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);

  --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.30);

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

  --score-high:   var(--homium-green);
  --score-mid:    #f5c842;
  --score-low:    #ff5f5f;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --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;

  --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);

  --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;

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

  --fs-display: clamp(28px, 4vw, 44px);
  --fs-h1:      32px;
  --fs-h2:      22px;
  --fs-h3:      17px;
  --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;
}