/* ============================================================================
   01 · DESIGN TOKENS

   The palette, typography scale, radii and shadows every other part resolves
   against. Nothing here paints anything — it only defines the vocabulary.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING (later parts intentionally override earlier
   ones) — the canonical order is dashboard/views/partials/_app_styles.ejs.
   ========================================================================== */

/* ===== DESIGN TOKENS =====
   Azra "Enterprise" system — near-black glass base with a crimson + pistachio
   accent language (matches the giveaway dashboard reference):
   CRIMSON = branding / primary actions, PISTACHIO = growth / status, RED = destructive. */
:root {
  /* Brand accents */
  --crimson:        #DC2626;
  --crimson-dark:   #B91C1C;
  --crimson-deep:   #991B1B;
  --crimson-glow:   #EF4444;
  --pistachio:      #93C572;
  --pistachio-light:#A8D08D;
  --pistachio-dark: #6FAF5A;
  --pistachio-glow: #B7E778;

  /* Backgrounds & surfaces */
  --bg-main:       #0A0A0F;   /* near-black app canvas */
  --bg-card:       #161B22;   /* Elevated component layer */
  --border-color:  rgba(255,255,255,.08);   /* hairline dividers */

  /* Typography scale */
  --text-primary:   #F8FAFC;  /* Headers, active states */
  --text-secondary: #94A3B8;  /* Body text, labels */

  /* Functional accents (RGB triplets exposed for alpha tints).
     --blue / --green are kept as token NAMES but now resolve to the new
     brand palette, so every existing rule inherits the re-theme for free. */
  --blue:        #DC2626;  --blue-rgb:  220, 38, 38;    /* Primary / branding (crimson) */
  --green:       #93C572;  --green-rgb: 147, 197, 114;  /* Growth / success (pistachio) */
  --red:         #EF4444;  --red-rgb:   239, 68, 68;    /* Destructive / moderation */

  /* ---- Legacy aliases (mapped onto the new system so existing rules inherit it) ---- */
  --bg:            #0A0A0F;   /* app canvas */
  --bg-sidebar:    rgba(22,27,34,.88);   /* glass surface (sidebar, thead, inputs) */
  --bg-secondary:  #111827;
  --bg-tertiary:   #0E1726;
  --surface:       #161B22;   /* card layer */
  --surface-hover: #1F2730;
  --border:        rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --glass:         rgba(17,24,39,.72);
  --glass-strong:  rgba(22,27,34,.88);
  --text:          #CBD5E1;   /* comfortable near-white body text */
  --text-muted:    #94A3B8;
  --blurple:       #DC2626;
  --blurple-hover: #B91C1C;
  --yellow:        #F59E0B;

  /* Typography — Sora for display, Plus Jakarta Sans for body, JetBrains Mono for code/stats */
  --font:         'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease:   cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --ring-blue:  0 0 0 3px rgba(220, 38, 38, 0.30);
  color-scheme: dark;
}

h1, h2, h3, .font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }