/* 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: #FFFFFF;          --surface: #FFFFFF;     --surface-2: #F1F1EE;
  --text: #191919;        --muted: #5B5B55;
  --border: #8A8A84;      --line: rgba(25, 25, 25, .10);          /* border: field outlines (3:1); line: hairline dividers */
  --accent: #0B6E4F;      --accent-contrast: #FFFFFF;             --accent-soft: #DDF0E8;
  --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: #151515;          --surface: #202020;     --surface-2: #2C2C2C;
  --text: #EDEDED;        --muted: #A8A8A8;
  --border: #7C7C7C;      --line: rgba(255, 255, 255, .10);
  --accent: #5FD0A4;      --accent-contrast: #06281D;             --accent-soft: #1C3A30;
  --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);
}

/* Catalog Product Background Color: identico per ogni foto (server/settings.py). Il tema scuro cambia la pagina, mai le foto. */
:root { --catalog-bg: #FFFFFF; }