/* ─── THE LEDGER: ESTATE DESIGN TOKENS (canon, 2026-08-05) ────────────
   THE ONE DESIGN LANGUAGE, from the judged design research
   (Source/design-2026-08-02/direction-the-ledger.json, judge winner) and
   THE-VAULT/07-THE-LOOK.md. The system is the document of record itself:
   cool bone paper, iron-gall inks, hairline rules, tabular mono numerals,
   dates and folios as the only ornament, ONE historical document-ink accent
   per product. The ledger is not a metaphor here; it is the data model.

   BANNED (design-lint enforceable): black-plus-gold chrome, parchment cream
   #F2EBDB, terracotta #A8763E, Cormorant Garamond, Courier Prime, Google
   Fonts CDN links, gradient heroes, glass, bento grids, rounded-lg
   everything, accent stripes, emoji UI. Gray hierarchy comes from the ink
   steps below, never from ad-hoc grays.

   Fonts: Public Sans (voice), Martian Mono (evidence: dates, folios,
   figures, buttons, code), Newsreader ONLY on noctaracorp.com for the ONE
   WORD and reveal headlines. Self-hosted woff2, never CDN.

   Each site sets EXACTLY TWO live accent vars from its product block:
   --accent and --wash. No second accent, ever.                            */

:root {
  /* grounds (light) */
  --paper: #F1F2EE;   /* page ground: cool bone, green-grey cast, NOT cream */
  --sheet: #FBFBF9;   /* raised ledger sheet: cards, artifacts, table frames */
  --well:  #E7E8E3;   /* inset well: disabled fills, quiet strips */
  --plate: #15181D;   /* the ink plate: code and API surfaces, BOTH modes */

  /* inks (light) */
  --ink: #15181D;
  --ink-muted: #4C535C;
  --rule: #C9CBC4;          /* decorative hairline only */
  --rule-strong: #80868D;   /* UI boundaries: inputs, table frames, nav rule */
  --ink-on-plate: #E6E8E3;
  --ink-muted-on-plate: #A2AAB3;

  /* product accents (light-on-paper). A site copies ONE pair to --accent/--wash. */
  --accent-pupul: #2440B8;  --wash-pupul: #DFE4F7;   /* iron-gall registry blue */
  --accent-lux:   #1E5A43;  --wash-lux:   #DCE8E1;   /* bankers ledger green */
  --accent-vex:   #8A2332;  --wash-vex:   #F2DFE1;   /* oxblood signature ink */
  --accent-mira:  #8C1F62;  --wash-mira:  #F1DEEA;   /* process aniline magenta */

  /* the two live vars each site sets (default: pupul) */
  --accent: var(--accent-pupul);
  --wash: var(--wash-pupul);

  /* type */
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --serif-word: 'Newsreader', Georgia, serif; /* noctara only: the WORD, reveal heads */

  /* spacing / structure */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --container: 1120px; --gutter: 24px; --measure: 72ch;
  /* Column width is a SYSTEM value chosen by page type, never a per page
     guess. Four types, four widths, and nothing else:
       --container       front door and app surfaces (index, dashboard)
       --container-wide  card and plan grids, segment pages (pricing, /for/*)
       --container-read  prose and policy (consent, trust, accuracy)
       --container-form  a single form (sign-up, sign-in)                   */
  --container-wide: 880px; --container-read: 780px; --container-form: 480px;

  /* radii: the record is squared. 2px default; inputs 4px; pills avatars ONLY. */
  --r0: 0; --r1: 2px; --r2: 4px; --r-pill: 999px;

  /* depth: resting sheet + lifted hover. Never blur, never glass. */
  --shadow-1: 0 1px 2px rgba(21, 24, 29, 0.07);
  --shadow-2: 0 2px 6px rgba(21, 24, 29, 0.08);
  --ring: none;

  --t-fast: 160ms ease-out;
  --t-slow: 320ms ease-out;
}

/* dark mode: paper darkens, plate is invariant, shadows become the ring */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101317; --sheet: #16191E; --well: #0B0D10; --plate: #15181D;
    --ink: #E6E8E3; --ink-muted: #A2AAB3;
    --rule: #262B31; --rule-strong: #5C636B;
    --accent-pupul: #93A8FF;  --wash-pupul: #1A2140;
    --accent-lux:   #59B58C;  --wash-lux:   #142720;
    --accent-vex:   #E68C97;  --wash-vex:   #2E181C;
    --accent-mira:  #E387C1;  --wash-mira:  #2B1725;
    --shadow-1: none; --shadow-2: none;
    --ring: inset 0 0 0 1px rgba(230, 232, 227, 0.14);
  }
}
:root[data-theme="dark"] {
  --paper: #101317; --sheet: #16191E; --well: #0B0D10; --plate: #15181D;
  --ink: #E6E8E3; --ink-muted: #A2AAB3;
  --rule: #262B31; --rule-strong: #5C636B;
  --accent-pupul: #93A8FF;  --wash-pupul: #1A2140;
  --accent-lux:   #59B58C;  --wash-lux:   #142720;
  --accent-vex:   #E68C97;  --wash-vex:   #2E181C;
  --accent-mira:  #E387C1;  --wash-mira:  #2B1725;
  --shadow-1: none; --shadow-2: none;
  --ring: inset 0 0 0 1px rgba(230, 232, 227, 0.14);
}
:root[data-theme="light"] {
  --paper: #F1F2EE; --sheet: #FBFBF9; --well: #E7E8E3; --plate: #15181D;
  --ink: #15181D; --ink-muted: #4C535C;
  --rule: #C9CBC4; --rule-strong: #80868D;
  --accent-pupul: #2440B8;  --wash-pupul: #DFE4F7;
  --accent-lux:   #1E5A43;  --wash-lux:   #DCE8E1;
  --accent-vex:   #8A2332;  --wash-vex:   #F2DFE1;
  --accent-mira:  #8C1F62;  --wash-mira:  #F1DEEA;
  --shadow-1: 0 1px 2px rgba(21, 24, 29, 0.07);
  --shadow-2: 0 2px 6px rgba(21, 24, 29, 0.08);
  --ring: none;
}

/* ─── the small component canon ─────────────────────────────────────── */
.lg-body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 24px; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; }
.lg-sheet { background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--r1); box-shadow: var(--shadow-1), var(--ring); }
.lg-plate { background: var(--plate); color: var(--ink-on-plate); border-radius: var(--r1); }
.lg-eyebrow { font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.lg-data { font-family: var(--mono); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
.lg-btn { display: inline-block; text-align: center; background: var(--accent); color: var(--paper); border: 0; border-radius: var(--r1); padding: 10px 18px; font-family: var(--mono); font-size: 13px; line-height: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; cursor: pointer; transition: opacity var(--t-fast); }
.lg-btn:hover { opacity: 0.88; text-decoration: none; }
.lg-btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--rule-strong); }
.lg-btn.ghost:hover { border-color: var(--accent); background: var(--wash); opacity: 1; }
.lg-stamp { display: inline-block; background: var(--wash); color: var(--accent); border-radius: var(--r1); padding: 2px 8px; font-family: var(--mono); font-size: 11px; line-height: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.lg-hr { border: 0; border-top: 1px solid var(--rule); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lg-btn:not(.ghost):focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }