/* WorkoutSmith design tokens — the contract.
 *
 * Every literal value the rest of the stylesheet uses lives here. Names
 * are functional (--ink, --paper, --accent, --warn) not chromatic, so
 * the underlying hue can change without renaming everywhere. Don't
 * introduce literal colors, font stacks, or sizes outside this file.
 *
 * The visual language is minimalist brutalism: warm cream paper, near-
 * black ink, heavy ink-colored borders, hard offset drop shadows, sharp
 * corners. See DESIGN.md for the rules and rationale.
 */

:root {
  /* ---------- Color ---------- */
  /* Paper-on-ink neutral. Warm cream is load-bearing — it's half the
   * brutalist character. Don't drift toward off-white. */
  --paper:      #f5f1e8;  /* warm ink-cream, the canvas */
  --paper-soft: #efe9db;  /* slightly inset surfaces (JSON body) */
  --ink:        #1a1814;  /* near-black, slightly warm */
  --ink-muted:  #6b6962;  /* secondary text only — never on borders */
  --rule:       var(--ink);

  /* The single brand accent. Forge orange — ties to "smith"; warmer than
   * blue; not red, so it can't collide with the error semantic. Used on
   * the primary action, the result panel header, focus rings, and the
   * bracket motif. Never as a section tint or decorative wash. */
  --accent:      #d94a1f;
  --accent-soft: #fbe4d7;

  /* Signal red — alerts only. Demoted from "brand" to "semantic." */
  --warn:      #a32424;
  --warn-soft: #faecec;

  /* Surface for monospaced content (JSON panel body). */
  --code-bg: var(--paper-soft);

  /* ---------- Type ---------- */
  --font-body: "Space Grotesk", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
               Consolas, monospace;

  /* Modular scale; --size-3 is body. Heavier hierarchy than 005 — the
   * page title should assert presence. */
  --size-1: 0.8125rem;  /* 13px — meta, labels */
  --size-2: 0.9375rem;  /* 15px — secondary */
  --size-3: 1.0625rem;  /* 17px — body */
  --size-4: 1.3125rem;  /* 21px — small heading */
  --size-5: 1.75rem;    /* 28px — section heading */
  --size-6: 2.5rem;     /* 40px — page title */

  --leading-tight:  1.2;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-bold:    700;

  /* ---------- Space ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---------- Lines — exposed structure, not decoration ---------- */
  /* Borders are full declarations, not just widths, so component CSS
   * can't accidentally use a different color. Hero surfaces earn
   * heavy; primary form surfaces get thick; rules get thin. */
  --border-thin:  1px solid var(--ink);
  --border-thick: 3px solid var(--ink);
  --border-heavy: 5px solid var(--ink);

  /* ---------- Shadow — hard offset, no blur ---------- */
  --shadow-hard:       4px 4px 0 var(--ink);
  --shadow-hard-small: 2px 2px 0 var(--ink);

  /* ---------- Layout ---------- */
  --content-max:  720px;
  --landing-max:  560px;
}