/* ============================================================
   tokens.css — Mail Argus design system tokens
   "Refractive Obsidian" — all values defined here, nowhere else
   ============================================================ */

/* ── Dark mode (default) ──────────────────────────────────── */
:root {
  /* Surfaces */
  --surface:                   #0e0e10;
  --surface-container-low:     #131316;
  --surface-container:         #1a1a1e;
  --surface-container-high:    #1f1f24;
  --surface-container-highest: #262529;

  /* Accent — verdict-driven */
  --primary:       #ca98ff;  /* Electric Purple  — idle / focus   */
  --primary-dim:   #9c42f4;  /* Deep Purple      — hover          */
  --secondary:     #5cfbb2;  /* Emerald Glow     — safe           */
  --secondary-dim: #2dd68a;
  --tertiary:      #ff7162;  /* Crimson Refract  — phishing       */
  --tertiary-dim:  #e04535;
  --warning:       #f2c94c;  /* Warm Gold        — suspicious     */
  --warning-dim:   #c9972a;

  /* Text */
  --on-surface:          #e8e6e9;
  --on-surface-variant:  #adaaad;
  --on-surface-disabled: #5a585b;

  /* Ghost borders */
  --outline:         rgba(255, 255, 255, 0.15);
  --outline-variant: rgba(255, 255, 255, 0.08);

  /* Glass fill */
  --glass-bg:     rgba(38, 37, 41, 0.50);
  --glass-bg-alt: rgba(26, 26, 30, 0.60);
}

/* ── Light mode ───────────────────────────────────────────── */
[data-theme="light"] {
  --surface:                   #f4f3f7;
  --surface-container-low:     #edecea;
  --surface-container:         #e6e4e8;
  --surface-container-high:    #dddbe0;
  --surface-container-highest: #d4d2d8;

  --primary:       #7c3aed;
  --primary-dim:   #5b21b6;
  --secondary:     #059669;
  --secondary-dim: #047857;
  --tertiary:      #dc2626;
  --tertiary-dim:  #b91c1c;
  --warning:       #d4a017;
  --warning-dim:   #a67c00;

  --on-surface:          #1a1a1e;
  --on-surface-variant:  #57545a;
  --on-surface-disabled: #a09ea3;

  --outline:         rgba(0, 0, 0, 0.12);
  --outline-variant: rgba(0, 0, 0, 0.06);

  --glass-bg:     rgba(255, 255, 255, 0.60);
  --glass-bg-alt: rgba(237, 236, 234, 0.70);
}

/* ── Typography scale ─────────────────────────────────────── */
:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-display-lg: clamp(2.5rem, 5vw, 3.5rem);
  --text-display-md: clamp(2rem, 4vw, 2.75rem);
  --text-headline:   1.75rem;
  --text-title-lg:   1.375rem;
  --text-title-md:   1.125rem;
  --text-body-md:    0.875rem;
  --text-body-sm:    0.8125rem;
  --text-label-md:   0.75rem;
  --text-label-sm:   0.6875rem;
}

/* ── Spacing scale ────────────────────────────────────────── */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;
  --space-34: 8.5rem;
}

/* ── Radius ───────────────────────────────────────────────── */
:root {
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-2xl:  2rem;
  --radius-full: 9999px;
}

/* ── Transitions ──────────────────────────────────────────── */
:root {
  /* fast: colour/border micro-interactions — curve barely matters at 150ms */
  --transition-fast:   150ms ease;
  /* base & slow: use deceleration curve — starts quickly, settles smoothly */
  --transition-base:   250ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow:   400ms cubic-bezier(0.2, 0, 0, 1);
}