/* 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.
   The look is liquid glass: translucent panes over a soft gradient, big radii, thin light borders. The glass values are here too, so the two themes
   stay in step. */
: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: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --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: #EEF1F7;          --surface: #FFFFFF;     --surface-2: #E4E9F2;
  --text: #101319;        --muted: #4E5666;
  --border: #6E7889;      --line: rgba(16, 19, 25, .10);          /* border: field outlines (3:1); line: hairline dividers */
  --accent: #1F5AE0;      --accent-contrast: #FFFFFF;             --accent-soft: #DCE6FF;
  --danger: #B3261E;      --danger-contrast: #FFFFFF;             --danger-soft: #FBE4E2;
  --scrim: rgba(12, 16, 24, .42);  --scrim-blur: 8px;
  --shadow: 0 12px 40px rgba(20, 30, 60, .16), 0 2px 8px rgba(20, 30, 60, .07);

  /* glass: the panes, the light edge, the inner highlight */
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-blur: 22px;
  --glow-a: rgba(120, 160, 255, .45);
  --glow-b: rgba(255, 170, 210, .38);
  --glow-c: rgba(150, 235, 220, .35);
}

/* 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: #0B0E14;          --surface: #171B24;     --surface-2: #232936;
  --text: #EDF1F8;        --muted: #A6B0C2;
  --border: #6E7A8E;      --line: rgba(255, 255, 255, .10);
  --accent: #8FB0FF;      --accent-contrast: #08122E;             --accent-soft: #1E2A47;
  --danger: #FF9A90;      --danger-contrast: #2A0805;             --danger-soft: #3A1F1D;
  --scrim: rgba(0, 0, 0, .58);  --scrim-blur: 8px;
  --shadow: 0 14px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);

  --glass: rgba(28, 34, 46, .55);
  --glass-strong: rgba(30, 37, 50, .78);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-blur: 22px;
  --glow-a: rgba(70, 110, 220, .40);
  --glow-b: rgba(150, 70, 130, .32);
  --glow-c: rgba(40, 140, 130, .30);
}