/* Loaded first (the leading underscore sorts ahead of every other stylesheet,
   which Propshaft includes via `stylesheet_link_tag :app`). Declares the cascade
   layer order once, so component files are order-independent, and holds the
   design tokens + base styles.

   Direction: an archival register kept with care. Birch-parchment surfaces,
   register-ink blue, a single madder-red seal, lineage made visible. Borders on
   warm paper, no drama shadows. Serif for the register voice; mono-tabular for
   the ledger columns (hetus, counts). */

@layer reset, base, components, utilities;

:root {
  /* Paper — the register page, near-white. Higher elevation = slightly lighter. */
  --paper: #f4f3f0;          /* canvas (~95% white, a whisper of warmth) */
  --surface: #fcfbf9;        /* cards / panels */
  --surface-raised: #ffffff; /* popovers, the rare overlay */
  --control-bg: #eae8e3;     /* inputs sit inset = darker than their surface */

  /* Ink — the writing. */
  --ink: #23292e;            /* primary text */
  --ink-2: #574f44;          /* secondary */
  --ink-3: #857c6d;          /* metadata */
  --ink-4: #a89f8c;          /* muted / placeholder */
  --paper-text: #f8f6f1;     /* text on inked surfaces */

  /* Rules — soft borders that disappear until you look for them. */
  --rule: rgba(40, 36, 28, 0.14);
  --rule-soft: rgba(40, 36, 28, 0.08);
  --rule-strong: rgba(40, 36, 28, 0.26);

  /* Accent — register ink-blue (Arctic). Structure + primary action. */
  --accent: #2b5a7a;
  --accent-strong: #21465f;

  /* Seal — madder red. Reserved for the important and the irreversible. */
  --seal: #a3352b;
  --seal-strong: #8a2c23;

  /* Semantic status (meaning, not decoration). */
  --vote-yes: #356b4f;       --vote-yes-bg: #e9f1e6;
  --vote-no: #6f6a61;        --vote-no-bg: #eeece8;
  --guard: #8a5e12;          --guard-bg: #f6eed6;   /* turvakielto */
  --review: #a3352b;         --review-bg: #f7e7e2;  /* computed ≠ decided */

  /* Type — vendored/system only (offline, 10-yr). */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", Georgia, ui-serif, serif;
  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.55rem;
  --text-2xl: 2rem;

  /* Spacing — base 0.25rem. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;

  /* Sharp, official. */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 5px;

  --max-width: 1800px;

  font-size: 17px;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100vh; line-height: 1.55; }
  img, picture, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer base {
  body {
    font-family: var(--system-ui);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }

  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 2px; }

  h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; color: var(--ink); line-height: 1.2; }
  h1 { font-size: var(--text-2xl); letter-spacing: -0.01em; }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  /* Ledger columns: hetus, counts, codes align on tabular figures. */
  .tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  /* Small-caps label voice used across the register. */
  .eyebrow {
    font-family: var(--system-ui);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.14em; }
}