/*
 * Cobalt Grid design tokens.
 *
 * Layout: three ruled columns on graph paper. The ticket ledger on the left,
 * the agent session as an inverted cobalt field in the middle, the review gate
 * as an answer sheet on the right. Two colors only (cobalt ink, newsprint
 * cream); state is shown by structure (inversion, strike-through, dashed
 * rules, hatching), never by red or green.
 */
:root {
  /* color */
  --paper: #F0EBDE;                       /* newsprint cream: the canvas */
  --paper-2: #E6E0CE;                     /* deeper cream for region shifts */
  --paper-3: #FAF7EF;                     /* lifted sheet for cards and code */
  --ink: #1F2BE0;                         /* electric cobalt: the only ink */
  --ink-soft: #5560E5;                    /* secondary cobalt */
  --ink-faint: rgba(31, 43, 224, 0.18);   /* dense dividers */
  --grid: rgba(31, 43, 224, 0.075);       /* graph paper, minor lines */
  --grid-major: rgba(31, 43, 224, 0.13);  /* graph paper, every fifth line */
  --field: #1F2BE0;                       /* the agent's inverted panel */
  --field-ink: #F0EBDE;
  --field-soft: rgba(240, 235, 222, 0.74);
  --field-faint: rgba(240, 235, 222, 0.24);
  --field-wash: rgba(240, 235, 222, 0.09);
  --focus: #1F2BE0;

  /* type */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* type scale */
  --fs-micro: 0.6875rem;   /* 11px  labels */
  --fs-small: 0.8125rem;   /* 13px  code, captions */
  --fs-body: 0.9375rem;    /* 15px  running text */
  --fs-lead: 1.0625rem;    /* 17px  question prompts */
  --fs-h3: 1.375rem;       /* 22px */
  --fs-h2: 1.875rem;       /* 30px */
  --fs-h1: 3.25rem;        /* 52px */
  --fs-hero: clamp(3.5rem, 9vw, 7.5rem);

  /* rhythm */
  --rule: 1.5px;
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --cell: 24px;            /* graph-paper cell */
  --radius: 2px;           /* flat: corners are almost square */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C1033;
    --paper-2: #151B4D;
    --paper-3: #111641;
    --ink: #EDE8DA;
    --ink-soft: #AEB4FF;
    --ink-faint: rgba(237, 232, 218, 0.2);
    --grid: rgba(128, 138, 255, 0.09);
    --grid-major: rgba(128, 138, 255, 0.16);
    --field: #1F2BE0;
    --field-ink: #F0EBDE;
    --field-soft: rgba(240, 235, 222, 0.78);
    --field-faint: rgba(240, 235, 222, 0.26);
    --field-wash: rgba(240, 235, 222, 0.1);
    --focus: #AEB4FF;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0C1033;
  --paper-2: #151B4D;
  --paper-3: #111641;
  --ink: #EDE8DA;
  --ink-soft: #AEB4FF;
  --ink-faint: rgba(237, 232, 218, 0.2);
  --grid: rgba(128, 138, 255, 0.09);
  --grid-major: rgba(128, 138, 255, 0.16);
  --field: #1F2BE0;
  --field-ink: #F0EBDE;
  --field-soft: rgba(240, 235, 222, 0.78);
  --field-faint: rgba(240, 235, 222, 0.26);
  --field-wash: rgba(240, 235, 222, 0.1);
  --focus: #AEB4FF;
  color-scheme: dark;
}