/* app.css — REGRADE. Tokens + page scale + page frame + border classes. Build width 1920 (DESIGN.md §0/§1). */
:root{
  --paper:#DBF37A;
  --paper-alt:#E8FF85;
  --sheet:#FFFDF3;
  --quiet-fill:#EEF7BE;
  --ink:#17190E;
  --muted:#6D6C45;
  --rule:#4D532C;
  --accent-warm:#CE1A48;
  --accent-cool:#A23F88;
  --data-violet:#6C28C9;
  --success:#2E6B2F;
  --usdc:#2775CA;

  --font-display:'Besley',serif;
  --font-body:'Andada Pro',serif;
  --font-ink:'East Sea Dokdo',cursive;

  --bg:var(--paper);
  --ink-color:var(--ink);
  --a:var(--accent-warm);
  --b:var(--accent-cool);

  /* page scale: 1 root unit = 100vw / 1920 design width, clamped so the page never grows past 2560 or shrinks below 1280 logic (media queries below handle <1024) */
  --vw:calc(100vw / 1920 * 100);
  --u:calc(100vw / 1920); /* 1 design px at 1920 (fix: length*% calc below was invalid, dropped every gutter/rule width) */
  --gutter-l:calc(45 * var(--u));
  --gutter-r:calc(43 * var(--u));

  /* border rule tokens (DESIGN.md §4b / BORDER_TABLE.md) */
  --rule-w:max(1px, calc(1 * var(--u)));
  --rule-w2:max(1px, calc(2 * var(--u)));
  --rule-color:var(--rule);
  --rule-ink:var(--ink);
}

html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);min-height:100vh}
h1,h2,h3,.display{font-family:var(--font-display)}
.ink-mark{font-family:var(--font-ink);color:var(--accent-warm)}

/* ONE PAGE FRAME (USER_FIXES #1): every route sits inside this container, never adds its own max-width/padding/background */
.page{width:100%;max-width:none;padding-left:var(--gutter-l);padding-right:var(--gutter-r);background:var(--paper)}
main{background:var(--paper)}

/* ONE class per framed component named in BORDER_TABLE.md / DESIGN.md §4b — routes use these, zero ad-hoc border/outline */
.rule-grid-row{border:var(--rule-w) solid var(--rule-color)}
.rule-ledger-row{border:var(--rule-w) solid var(--rule-color)}
.rule-divider{border:none;border-bottom:var(--rule-w2) solid var(--rule-color)}
.rule-tab{border:var(--rule-w) solid var(--rule-color)}
.rule-panel{border:var(--rule-w) solid var(--rule-color)}
.rule-input{border:var(--rule-w) solid var(--rule-ink);box-sizing:border-box;padding:calc(8 * var(--u)) calc(12 * var(--u))}

/* body type scale: clamp so it never drops below 12px, scales with viewport per DESIGN.md §1 */
body{font-size:clamp(14px, calc(18 * var(--u)), 24px)}

a{color:inherit;text-decoration:none}
:where(button,input,select,textarea){border:0;font:inherit;color:inherit;background:none}
.sample-chip{display:none !important}

@media (max-width:1023px){
  .page{padding-left:24px;padding-right:24px}
}