/* ════════════════════════════════════════════════════════
   ARDEN LABS — DESIGN TOKENS
   Edit these variables to retheme the entire site.
   ════════════════════════════════════════════════════════ */

:root {

  /* ── PALETTE ── */
  --void:          #020609;
  --depth-1:       #06090f;
  --depth-2:       #0a1018;
  --depth-3:       #0f1924;
  --depth-4:       #141f2d;
  --depth-5:       #192636;

  --border-dim:    #1a2a3d;
  --border-mid:    #1e3350;
  --border-lit:    #245070;

  --teal:          #00d4e8;
  --teal-glow:     rgba(0,212,232,0.12);
  --teal-dim:      #00aabf;
  --teal-muted:    rgba(0,212,232,0.06);

  --green:         #00e676;
  --green-glow:    rgba(0,230,118,0.1);
  --green-dim:     #00b85a;

  --amber:         #ffab00;
  --amber-glow:    rgba(255,171,0,0.08);

  --red:           #ff3d57;
  --red-glow:      rgba(255,61,87,0.1);

  --text-100:      #eaf3f8;
  --text-200:      #b8cfe0;
  --text-300:      #7a9ab8;
  --text-400:      #4d6d88;
  --text-500:      #2d4a62;

  /* ── TYPOGRAPHY ── */
  --font-head:     'DM Serif Display', Georgia, serif;
  --font-ui:       'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ── SPACING ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 140px;

  /* ── RADIUS ── */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-2xl: 24px;

  /* ── TRANSITIONS ── */
  --ease:     cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --t-fast:   0.15s;
  --t-mid:    0.25s;
  --t-slow:   0.4s;

  /* ── SHADOWS ── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.45);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.65);
  --shadow-teal: 0 0 32px rgba(0,212,232,0.18);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,212,232,0.14), 0 0 40px rgba(0,212,232,0.1);

  /* ── LAYOUT ── */
  --nav-h:    60px;
  --sidebar-w: 260px;
  --content-max: 1280px;
  --content-pad: 48px;
}

@media (max-width: 768px) {
  :root {
    --content-pad: 20px;
    --space-3xl: 64px;
    --space-4xl: 96px;
  }
}