/* css/tokens.css — Kronos Code Studio Design Tokens */
:root {
  /* Colors */
  --red:           #C0182A;
  --red-dark:      #8B0000;
  --red-mid:       #A01020;
  --red-glow:      rgba(192, 24, 42, 0.55);
  --red-glow-sm:   rgba(192, 24, 42, 0.25);
  --red-subtle:    rgba(192, 24, 42, 0.08);

  --gold:          #FFD700;
  --gold-dark:     #C8A84B;
  --gold-mid:      #E5C042;
  --gold-glow:     rgba(255, 215, 0, 0.45);
  --gold-glow-sm:  rgba(255, 215, 0, 0.2);
  --gold-subtle:   rgba(255, 215, 0, 0.06);

  --green:         #00C97A;
  --green-glow:    rgba(0, 201, 122, 0.4);
  --amber:         #FFA500;
  --amber-glow:    rgba(255, 165, 0, 0.35);

  /* Backgrounds */
  --bg:            #060608;
  --bg-2:          #0b0b10;
  --bg-3:          #10101a;
  --card-bg:       rgba(10, 10, 18, 0.90);
  --card-border:   rgba(192, 24, 42, 0.22);
  --card-border-h: rgba(255, 215, 0, 0.28);

  /* Text */
  --text:          #e8e8f2;
  --text-2:        #a0a0c0;
  --text-3:        #606080;

  /* Typography */
  --font-orb:      'Orbitron', sans-serif;
  --font-raj:      'Rajdhani', sans-serif;
  --font-mono:     'Space Mono', monospace;

  /* Spacing scale */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* Border radius */
  --rad-sm: 2px;
  --rad-md: 4px;
  --rad-lg: 8px;

  /* Transitions */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --fast:   0.18s;
  --mid:    0.28s;
  --slow:   0.5s;

  /* Z-index scale */
  --z-bg:   0;
  --z-base: 1;
  --z-card: 10;
  --z-nav:  100;
  --z-top:  200;
}