/* LAMPA pay site — tokens. Source: docs/brand/r3/PALETTE.md (measured ratios), docs/design/TOKENS.md,
   and the e-mail «night letterhead» (vpn-c6/email-v3). Two themes, each designed, not inverted:
   day = cream paper under a night band; night = one warm room. The band and the lamp's window are
   night in BOTH themes, exactly as in the e-mail, so the brand reads the same on a bank's phone and
   in a reviewer's daylight browser.

   Amber is spent on the ACTION channel only (PALETTE amendment 2026-09-11): the one lit capsule per
   page and a selected choice. It is never text on the day theme (1.78:1), never a status, never an
   amount, and never lit while the page waits on a bank. */

:root {
  color-scheme: light dark;

  --font-display: Prata, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-code: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* night, fixed in both themes */
  --band: #14120F;
  --band-text: #F3EEE4;       /* 16.17:1 on band */
  --band-text2: #A79C8C;      /* 6.92:1 on band */
  --band-line: #312A22;
  --window-top: #221A10;
  --window-bottom: #14120F;

  /* the action channel */
  --action: #F0A93C;
  --action-hover: #F5B85A;
  --on-action: #2A1F0E;       /* 8.03:1 on --action */

  --r-control: 999px;
  --r-card: 20px;
  --r-tile: 18px;
  --r-inset: 14px;

  --wrap: 72rem;
  --gutter: clamp(16px, 5.4vw, 32px); /* a margin, not text: it must not grow with the text size */
  --e-out: cubic-bezier(.25, .46, .45, .94);
}

/* ---- day ---- */
:root,
:root[data-theme="light"] {
  --ground: #F5F1E8;
  --surface: #FFFFFF;
  --inset: #FBF8F1;
  --line: #E6DCCB;
  --line-strong: #CDBFA8;
  --text: #1A1712;            /* 15.85:1 on ground */
  --text2: #5E564A;           /* 6.41:1 on ground, 7.23:1 on surface, 5.98:1 on foot */
  --choice-fill: rgb(240 169 60 / .14);
  --choice-line: #B26A0A;     /* PALETTE light accent; a border, never text: >= 3:1 on surface (non-text, WCAG 1.4.11) */
  --focus: #9A5A06;           /* 4.85:1 on ground */
  --foot: #EFE9DD;
  --shadow: 0 1px 0 rgb(26 23 18 / .04), 0 18px 40px -24px rgb(26 23 18 / .22);
}

/* ---- night ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band: #0F0D0B;
    --ground: #14120F;
    --surface: #1F1B16;
    --inset: #191612;
    --line: #2E2821;
    --line-strong: #463D32;
    --text: #F3EEE4;          /* 16.17:1 on ground */
    --text2: #A79C8C;         /* 6.92:1 on ground, 6.34:1 on surface */
    --choice-fill: rgb(240 169 60 / .10);
    --choice-line: #F0A93C;
    --focus: #F0A93C;
    --foot: #100E0C;
    --shadow: 0 1px 0 rgb(0 0 0 / .2), 0 24px 48px -28px rgb(0 0 0 / .7);
  }
}
:root[data-theme="dark"] {
  --band: #0F0D0B;
  --ground: #14120F;
  --surface: #1F1B16;
  --inset: #191612;
  --line: #2E2821;
  --line-strong: #463D32;
  --text: #F3EEE4;
  --text2: #A79C8C;
  --choice-fill: rgb(240 169 60 / .10);
  --choice-line: #F0A93C;
  --focus: #F0A93C;
  --foot: #100E0C;
  --shadow: 0 1px 0 rgb(0 0 0 / .2), 0 24px 48px -28px rgb(0 0 0 / .7);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* the largest text size: every length below is rem or em, so a 200 % root reflows instead of clipping */
:root[data-text="xl"] { font-size: 200%; }