/*
 * The Iron Prophet — design tokens.
 * Dark mode only. The interface is machined iron; the ember light is the prophecy.
 * Do not introduce a light theme or additional palettes here.
 */

:root {
  --void: #0B0B0C;        /* page background */
  --iron-900: #131417;    /* deep surface */
  --iron-800: #1A1C20;    /* card surface */
  --iron-700: #24262B;    /* raised surface */
  --edge: #33363D;        /* bevel lines, borders */
  --steel: #C9CDD3;       /* metallic headings */
  --ash: #8B909A;         /* secondary text */
  --parchment: #E8E3D9;   /* passage text, warm off-white */
  --ember: #FF6A00;       /* primary accent */
  --ember-glow: #FFB35C;  /* highlight end of gradients */
  --ember-deep: #C24A00;  /* pressed states, shadows */

  --font-display: "Chakra Petch", sans-serif;
  --font-passage: "Spectral", serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Radius scale — the app was too square. */
  --r-sm: 6px;   /* chips, inputs, small plates */
  --r-md: 12px;  /* buttons, plates */
  --r-lg: 18px;  /* cards */
  --r-hero: 28px; /* the hero verdict card */

  /* Elevation scale — the app was flat. Every panel also carries a machined
     edge ring (--ring); hero surfaces add ember bloom on top. */
  --elev-flat: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 6px rgba(0, 0, 0, 0.5);
  --elev-raised: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px -8px rgba(0, 0, 0, 0.8);
  --elev-hero: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 50px -16px rgba(0, 0, 0, 0.9),
    0 0 30px -10px rgba(255, 106, 0, 0.4);
  --well: inset 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 0 0 1px var(--edge);
  --ring: 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* Spacing scale — new. */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;

  /* Metal and ember surface gradients, reused across cards, plates, buttons. */
  --metal: linear-gradient(180deg, var(--iron-800), var(--iron-900));
  --metal-raised: linear-gradient(180deg, var(--iron-700), var(--iron-800));
  --ember-grad: linear-gradient(180deg, var(--ember-glow), var(--ember) 45%, var(--ember-deep));
  --steel-clip: linear-gradient(180deg, #EEF1F4, #AAB0B8 55%, #767C84);
  --steel-clip-short: linear-gradient(180deg, #EEF1F4, #8B9098);
}