/* IvarsPenn — design tokens.
 *
 * The single source of truth for every literal colour, size, weight,
 * spacing step, border, and shadow used in the app. Component CSS
 * MUST read from these — never redeclare a hex value or rem size.
 *
 * Names follow function, not hue, so we can re-pick the palette
 * without renaming everywhere. See DESIGN.md for the why.
 */

:root {
  /* Colour — paper-on-ink neutral base, two functional signals. */
  --paper:       #f5f1e8;  /* warm ink-cream, the canvas */
  --paper-soft:  #efe9db;  /* slightly inset surfaces (panels, cards) */
  --ink:         #1a1814;  /* near-black, slightly warm */
  --rule:        #1a1814;  /* heavy borders share the ink colour */

  --accent:      #c92a2a;  /* signal red — corrections, the wavy mark */
  --accent-soft: #ffe3e3;  /* washed red — active highlight */

  --ok:          #2b8a3e;  /* confirmation green — clean text */
  --ok-soft:     #d3f9d8;  /* washed green — clean banner background */

  /* Type — two faces, semantic split. */
  --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 type scale (rem). */
  --size-1: 0.8125rem;  /* 13px — meta, badges */
  --size-2: 0.9375rem;  /* 15px — small body */
  --size-3: 1.0625rem;  /* 17px — body default */
  --size-4: 1.3125rem;  /* 21px — section headings */
  --size-5: 1.75rem;    /* 28px — page subheading */
  --size-6: 2.5rem;     /* 40px — page title */

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

  --line-tight: 1.2;
  --line-body:  1.55;

  /* Space scale — 4 → 64 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Borders — exposed structure, not decoration. */
  --border-thin:  1px solid var(--rule);
  --border-thick: 3px solid var(--rule);
  --border-heavy: 5px solid var(--rule);

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