/* ══════════════════════════════════════════════
   CAIS Federal Portal — Design Tokens
   Source of truth for the design system.
   Extracted from Signalform Studio aesthetic.
   ══════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --copper: #C4713B;
  --copper-glow: rgba(196, 113, 59, 0.06);
  --copper-light: rgba(196, 113, 59, 0.08);
  --copper-mid: rgba(196, 113, 59, 0.15);
  --copper-glow-shadow: 0 0 20px rgba(196, 113, 59, 0.12);

  /* ── Neutrals ── */
  --black: #1a1a1a;
  --gray: #6b6b6b;
  --light-gray: #a8a8a8;
  --border: #e5e0db;
  --bg: #faf7f3;
  --white: #ffffff;
  --header-bg: rgba(250, 247, 243, 0.88);

  /* ── Elevation (3-tier shadow system) ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 0 1px rgba(196, 113, 59, 0.1), 0 0 20px rgba(196, 113, 59, 0.08);

  /* ── Glass ── */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 16px;

  /* ── Status ── */
  --green: #2d8a4e;
  --green-light: rgba(45, 138, 78, 0.08);
  --green-glow: 0 0 12px rgba(45, 138, 78, 0.15);
  --amber: #b8860b;
  --amber-light: rgba(184, 134, 11, 0.08);
  --red: #c0392b;
  --red-light: rgba(192, 57, 43, 0.08);

  /* ── Typography ── */
  --font-display: 'DM Sans', -apple-system, 'Helvetica Neue', sans-serif;
  --font-serif: 'DM Serif Display', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  /* ── Radii ── */
  --radius-card: 14px;
  --radius-pill: 100px;
  --radius-button: 10px;
  --radius-input: 10px;
  --radius-badge: 100px;
  --radius-modal: 16px;
  --radius-checkbox: 6px;

  /* ── Easing ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ── Spacing ── */
  --header-height: 64px;
  --max-width: 900px;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --black: #e8e4df;
  --gray: #9a9590;
  --light-gray: #6b6560;
  --border: #2e2a26;
  --bg: #111110;
  --white: #1a1917;
  --header-bg: rgba(17, 17, 16, 0.85);

  /* ── Dark elevation ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-glow: 0 0 0 1px rgba(196, 113, 59, 0.2), 0 0 24px rgba(196, 113, 59, 0.1);

  /* ── Dark glass ── */
  --glass-bg: rgba(26, 25, 23, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);

  --green: #4ade80;
  --green-light: rgba(74, 222, 128, 0.1);
  --green-glow: 0 0 12px rgba(74, 222, 128, 0.15);
  --amber: #fbbf24;
  --amber-light: rgba(251, 191, 36, 0.1);
  --red: #f87171;
  --red-light: rgba(248, 113, 113, 0.1);
  --copper-light: rgba(196, 113, 59, 0.15);
  --copper-mid: rgba(196, 113, 59, 0.25);
  --copper-glow-shadow: 0 0 24px rgba(196, 113, 59, 0.15);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background 0.4s var(--ease-out), color 0.3s var(--ease-out);
}