/* Design tokens: the only place with raw colours, sizes and motion values. The Libreria grafica (web/ds) draws the glass, the segments, the switches and the sliders from the same
   variable names; where both define one, THIS file wins (it is loaded after the library's).
   Dark ("notte": gold and ember on a violet black) is the default; light ("pergamena") follows the same names. theme.js sets data-theme on <html> before the first paint.
   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. Colours that are not plain #RRGGBB (glass, scrim, shadows) are tuned by eye on the pictures behind them, never on a flat colour. */
: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: 22px; --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-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1); --d1: 140ms; --d2: 240ms; --d3: 420ms;
  --bar-h: 56px; --tab-h: 64px; --tab-w: 420px; --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, "pergamena" */
  color-scheme: light;
  --bg: #F6F1E7;          --bg-2: #EEE7D8;        --surface: #FFFDF8;     --surface-2: #EEE7D8;   --surface-3: #E3DAC7;
  --text: #1E1913;        --muted: #5C5347;       --faint: #6B6256;
  --border: #8A8070;      --line: rgba(30, 25, 19, .10);          --line-2: rgba(30, 25, 19, .16);        /* border: field outlines (3:1); line: hairline dividers */
  --accent: #8F5700;      --accent-2: #B5471A;    --on-accent: #FFF8EA;   --accent-contrast: #FFF8EA;     --accent-soft: #F6E3BD;
  --accent-rgb: 143 87 0; --accent-2-rgb: 181 71 26; --accent-3-rgb: 98 84 190;
  --accent-ui-l: #8F5700; --accent-ui-d: #EDB04A; --accent-text-l: #8F5700; --accent-text-d: #F2C772;
  --danger: #B3261E;      --danger-contrast: #FFFFFF;             --danger-soft: #FBE4E2;
  --glass-rgb: 255 252 245; --glass-alpha: .62; --glass-solid: #FFFDF8; --glass-line: rgba(255, 255, 255, .85); --glass-hi: rgba(255, 255, 255, .95); --glass-edge: rgba(30, 25, 19, .08);
  --stage: #EFE7D6;       --stage-a: .30;
  --scrim: rgba(30, 22, 10, .42);  --scrim-blur: 8px;
  --pill-bg: rgba(30, 25, 19, .08);       --pill-on: rgba(30, 25, 19, .14);
  --shadow: 0 10px 34px rgba(60, 40, 10, .20), 0 2px 8px rgba(60, 40, 10, .10);
}

/* 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). */
/* The many small glass panels (every card has one) blur less than the bars and sheets: the cost of a blur grows with its radius. data-fx="lite" (the library's switch) turns every blur off. */
:root { --bf-card: blur(12px) saturate(1.5); }
html[data-fx="lite"] { --bf-card: none; }
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: #0C0A11;          --bg-2: #16121D;        --surface: #16121D;     --surface-2: #201B2A;   --surface-3: #2B2437;
  --text: #F4F0F8;        --muted: #B3AAC1;       --faint: #9A91A9;
  --border: #8D8499;      --line: rgba(255, 255, 255, .09);       --line-2: rgba(255, 255, 255, .16);
  --accent: #EDB04A;      --accent-2: #E0702F;    --on-accent: #1A1204;   --accent-contrast: #1A1204;     --accent-soft: #34270F;
  --accent-rgb: 237 176 74; --accent-2-rgb: 224 112 47; --accent-3-rgb: 127 107 255;
  --accent-ui-l: #8F5700; --accent-ui-d: #EDB04A; --accent-text-l: #8F5700; --accent-text-d: #F2C772;
  --danger: #FF8F86;      --danger-contrast: #2A0805;             --danger-soft: #3A1F1D;
  --glass-rgb: 34 27 46;  --glass-alpha: .52; --glass-solid: #1B1626; --glass-line: rgba(255, 255, 255, .14); --glass-hi: rgba(255, 255, 255, .20); --glass-edge: rgba(0, 0, 0, .40);
  --stage: #0A0810;       --stage-a: .36;
  --scrim: rgba(5, 3, 10, .62);  --scrim-blur: 8px;
  --pill-bg: rgba(255, 255, 255, .12);    --pill-on: rgba(255, 255, 255, .22);
  --shadow: 0 12px 38px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}