/* Design tokens: the only place with raw colours, sizes and motion values.
   Light is the default; theme.js sets data-theme on <html> before the first paint (from Telegram, else from the device).
   Every text/background pair is checked for contrast by tests/front.test.mjs (text >= 4.5:1, interface parts >= 3:1) in both themes:
   when you add a pair, add it to the matrix there. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* type scale; fields use --t-body (16px): smaller and iOS zooms the page on focus (zoom is not disabled here) */
  --t-cap: 12px; --t-meta: 13px; --t-sm: 15px; --t-body: 16px; --t-title: 20px; --t-large: 28px;
  /* spacing (4px grid), radii, motion, sizes */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1); --d1: 120ms; --d2: 200ms; --d3: 320ms;
  --bar-h: 52px; --fab: 56px; --column: 640px;

  /* Safe areas, in CSS only: the phone's own (env) and the ones Telegram reports (>= 8.0). The Telegram variables do not exist until the
     client sends an event, so every use has a fallback: without one the whole declaration is dropped. */
  --sat: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --sal: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --sar: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));

  /* palette: light */
  color-scheme: light;
  --bg: #F8F4EC;          --surface: #FFFDF8;     --surface-2: #EFE8DA;
  --text: #1D1A14;        --muted: #675E4D;
  --border: #948C7B;      --line: rgba(60, 48, 20, .12);          /* border: field outlines (3:1); line: hairline dividers */
  --accent: #7A5A10;      --accent-contrast: #FFFFFF;             --accent-soft: #F1E7CC;
  --ok: #1A7442;          --ok-soft: #DCEFE3;                     --warn: #8A5A00;        --warn-soft: #F7E8C6;
  --danger: #B3261E;      --danger-contrast: #FFFFFF;             --danger-soft: #FBE4E2;
  --scrim: rgba(20, 20, 18, .45);  --scrim-blur: 6px;
  --shadow: 0 10px 34px rgba(20, 20, 18, .18), 0 2px 8px rgba(20, 20, 18, .08);
}

/* Full screen (Bot API 8.0): Telegram hides its header and keeps its own buttons (close, menu) over the top of the page. The space they take is the content safe area; it is added to the
   device's own (notch). Whether Telegram reports it as an addition or already inside the device's is not documented: the phone test records both numbers (js/trace.js). */
html.fullscreen { --sat: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0907;          --surface: #17130D;     --surface-2: #211B13;
  --text: #F0E8D8;        --muted: #B0A58D;
  --border: #7A7468;      --line: rgba(240, 232, 216, .11);
  --accent: #D6B46A;      --accent-contrast: #1A1408;             --accent-soft: #2A2316;
  --ok: #7BE0A4;          --ok-soft: #16301F;                     --warn: #F4C76A;        --warn-soft: #33290F;
  --danger: #FF8F86;      --danger-contrast: #2A0805;             --danger-soft: #3A1F1D;
  --scrim: rgba(0, 0, 0, .6);  --scrim-blur: 6px;
  --shadow: 0 12px 38px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}