/* ============================================================
   CODISE-IT | variables.css
   Global design tokens — colors, typography, spacing, radius
   ============================================================ */

:root {
  /* Brand Colors */
  --pri:          #6c63ff;
  --pri-2:        #8b7cff;
  --pri-dark:     #4f48cc;
  --sec:          #00c2a8;
  --sec-2:        #00a0ff;
  --acc:          #ff8a5b;
  --acc-dark:     #e06030;

  /* Neutrals */
  --white:        #ffffff;
  --bg:           #f7f9fc;
  --bg-soft:      #eef3f9;
  --surface:      #ffffff;
  --surface-2:    #f3f7fd;
  --text:         #142033;
  --text-mid:     #3a4f6a;
  --muted:        #5f6f86;
  --line:         #dce6f2;
  --line-soft:    rgba(20,32,51,.06);

  /* Semantic */
  --success:      #00c2a8;
  --warning:      #ff8a5b;
  --danger:       #e84040;
  --info:         #00a0ff;

  /* Shadows */
  --shadow-xs:    0 2px 8px rgba(41,61,90,.06);
  --shadow-sm:    0 6px 20px rgba(41,61,90,.09);
  --shadow:       0 18px 45px rgba(41,61,90,.10);
  --shadow-lg:    0 24px 60px rgba(41,61,90,.18);
  --shadow-pri:   0 12px 28px rgba(108,99,255,.24);
  --shadow-sec:   0 12px 28px rgba(0,194,168,.18);

  /* Border Radius */
  --r-xs:   8px;
  --r-sm:   12px;
  --r:      16px;
  --r-md:   20px;
  --r-lg:   26px;
  --r-xl:   32px;
  --r-full: 999px;

  /* Typography */
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing Scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Layout */
  --max-width:        1240px;
  --max-width-narrow: 860px;
  --max-width-wide:   1400px;

  /* Transitions */
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, .2, 1);
  --dur-fast:   150ms;
  --dur:        250ms;
  --dur-slow:   400ms;
  --dur-reveal: 700ms;

  /* Z-Index Scale */
  --z-base:    0;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #0d1520;
    --bg-soft:    #111d2c;
    --surface:    #16233a;
    --surface-2:  #1a2940;
    --text:       #e8f0f8;
    --text-mid:   #a8bdd0;
    --muted:      #7a96b0;
    --line:       rgba(255,255,255,.08);
    --line-soft:  rgba(255,255,255,.04);
    --shadow-xs:  0 2px 8px rgba(0,0,0,.3);
    --shadow-sm:  0 6px 20px rgba(0,0,0,.35);
    --shadow:     0 18px 45px rgba(0,0,0,.4);
    --shadow-lg:  0 24px 60px rgba(0,0,0,.5);
  }
}