/* ==========================================================================
   UIForge design tokens
   One source of truth for color, type and spacing. Change values here and
   the whole site (and the form engine) follows.
   ========================================================================== */

:root {
  /* Color: forged steel, light */
  --bg: #EEF0F3;          /* steel grey canvas */
  --surface: #FFFFFF;     /* panels, cards */
  --surface-2: #F6F7F9;   /* insets, previews */
  --ink: #1B1F27;         /* slate text */
  --muted: #5B6472;       /* secondary text */
  --line: #D5D9E0;        /* borders, rules */
  --accent: #2B55B5;      /* tempered blue */
  --accent-hover: #234A9E;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EAF8;
  --ok: #2E7D5B;
  --err: #B3261E;
  --focus: #2B55B5;

  /* Temper colors: straw, bronze, violet, blue. The UIForge signature. */
  --temper: linear-gradient(90deg, #D9B44A 0%, #B8733A 33%, #6B4FA0 66%, #2E5BBA 100%);

  /* Type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --wide: 125%;           /* Archivo expanded width for display type */

  /* Type scale (1.25 ratio) */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.45rem);
  --fs-3xl: clamp(2.3rem, 1.4rem + 4vw, 3.9rem);

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  /* Shape: small radius for controls, larger for panels */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --shadow-panel: 0 1px 0 rgba(27, 31, 39, 0.04), 0 12px 32px -12px rgba(27, 31, 39, 0.18);
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 32px);

  color-scheme: light;
}

/* Dark: follows the system unless the visitor picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12151B;
    --surface: #1A1E26;
    --surface-2: #20252F;
    --ink: #E6E9EF;
    --muted: #9AA3B2;
    --line: #2E3440;
    --accent: #7C9BF0;
    --accent-hover: #93ADF4;
    --accent-ink: #0F1420;
    --accent-soft: #232D45;
    --ok: #5FC198;
    --err: #F2857C;
    --focus: #93ADF4;
    --shadow-panel: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #12151B;
  --surface: #1A1E26;
  --surface-2: #20252F;
  --ink: #E6E9EF;
  --muted: #9AA3B2;
  --line: #2E3440;
  --accent: #7C9BF0;
  --accent-hover: #93ADF4;
  --accent-ink: #0F1420;
  --accent-soft: #232D45;
  --ok: #5FC198;
  --err: #F2857C;
  --focus: #93ADF4;
  --shadow-panel: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}