/* ===========================================================
   DevRadar — Design Tokens
   Light + Dark theme, two font moods, spacing/radii/shadows.
   =========================================================== */

:root {
  /* Light theme (default) */
  --bg: #FBFAF6;             /* warm ivory */
  --surface: #FFFFFF;
  --surface-2: #F4F2EB;      /* hairline divider / subtle card */
  --fg: #1A1D24;
  --fg-2: #4A4F5A;
  --muted: #7B8190;
  --border: #E7E3D8;         /* warm hairline */
  --accent: #E8623D;         /* calm coral / orange */
  --accent-2: #B44A2A;       /* accent on dark backgrounds / hover */
  --accent-soft: #FCE6DC;    /* accent tinted background */
  --success: #4F8A5B;
  --warn: #C8923B;
  --danger: #B14A3C;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20, 22, 28, 0.04), 0 1px 1px rgba(20, 22, 28, 0.03);
  --shadow-2: 0 4px 14px rgba(20, 22, 28, 0.06), 0 1px 2px rgba(20, 22, 28, 0.04);
  --shadow-3: 0 12px 32px rgba(20, 22, 28, 0.10), 0 2px 6px rgba(20, 22, 28, 0.05);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;

  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --max-w: 1180px;
  --header-h: 64px;
  --transition-fast: 140ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition: 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

:root[data-theme="dark"] {
  --bg: #0F1115;
  --surface: #1A1D24;
  --surface-2: #232730;
  --fg: #E4E6EB;
  --fg-2: #B3B8C4;
  --muted: #8088A0;
  --border: #2B303C;
  --accent: #D86A48;        /* lower chroma to avoid glare */
  --accent-2: #E07A5A;
  --accent-soft: #2A1B16;
  --success: #5C9D6B;
  --warn: #D49A47;
  --danger: #C45A4C;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Font mood toggle — default sans, optional serif */
:root[data-font="serif"] {
  --font-sans: "Source Serif 4", "Iowan Old Style", "Charter", Georgia, serif;
  --font-display: "Source Serif 4", "Iowan Old Style", "Charter", Georgia, serif;
}