/* ─────────────────────────────────────────────────────────────
   design-tokens.css · GreenHoss canonical design tokens
   Single source of truth for colors, typography, radii, shadows.
   Dark-mode: bg #0d1117, mint accent #4ade80, Inter font.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Palette ── */
  --bg:           #0d1117;
  --bg-raised:    #161b22;
  --surface:      #1c2230;
  --surface-2:    #212836;
  --border:       rgba(74, 222, 128, 0.10);
  --border-mid:   rgba(74, 222, 128, 0.18);
  --border-soft:  rgba(255, 255, 255, 0.07);

  --mint:         #4ade80;
  --mint-dim:     rgba(74, 222, 128, 0.14);
  --mint-faint:   rgba(74, 222, 128, 0.06);
  --mint-glow:    0 0 0 1px rgba(74, 222, 128, 0.18), 0 8px 24px rgba(74, 222, 128, 0.10);

  --text:         #e6edf3;
  --text-muted:   #8b949e;
  --text-subtle:  #4d5b6b;

  --amber:        #f4c95d;
  --amber-bg:     rgba(244, 201, 93, 0.08);
  --amber-border: rgba(244, 201, 93, 0.20);

  --red:          #f47174;
  --red-bg:       rgba(244, 113, 116, 0.08);
  --red-border:   rgba(244, 113, 116, 0.20);

  --blue:         #60a5fa;
  --blue-dim:     rgba(96, 165, 250, 0.12);

  /* ── Legacy aliases (preserve JS/CSS compatibility) ── */
  --bg-soft:      var(--bg-raised);
  --card:         var(--surface);
  --line:         var(--border);
  --pine:         var(--mint);
  --pine-dark:    var(--bg);
  --sand:         var(--amber);
  --muted:        var(--text-muted);
  --accent:       var(--mint);
  --color-muted:  var(--text-muted);
  --color-accent: var(--mint);

  /* ── Typography ── */
  --font-family:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", SFMono-Regular, "Roboto Mono", monospace;

  /* ── Radii ── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Legacy radius aliases */
  --radius-xs: var(--r-xs);
  --radius-sm: var(--r-sm);
  --radius-lg: var(--r-lg);

  /* ── Shadows ── */
  --shadow-card:   0 1px 0 rgba(255,255,255,0.04), 0 8px 28px rgba(0,0,0,0.35);
  --shadow-raised: 0 2px 0 rgba(255,255,255,0.06), 0 16px 48px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 40px rgba(74, 222, 128, 0.08);
  --shadow-hover:  0 4px 12px rgba(74, 222, 128, 0.12), 0 16px 40px rgba(0,0,0,0.4);
  --shadow-lg:     0 28px 72px rgba(0,0,0,0.45);
  --shadow-md:     var(--shadow-card);
  --shadow-sm:     0 6px 16px rgba(0,0,0,0.25);

  /* Legacy shadow aliases */
  --shadow-elevation-1: var(--shadow-card);
  --shadow-elevation-2: var(--shadow-raised);

  /* ── Spacing (preserved from old tokens) ── */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-8: 48px;
}