/*
 * Sala — il linguaggio visivo di PV Prenota.
 * Pensato per un tablet in sala letto a un metro, con poca luce, e per il telefono di chi arriva da Google Maps.
 * Neutri "pietra" con una punta di verde, accento verde bottiglia, stati separati dall'accento.
 * Layout: superfici bianche su fondo pietra; i posti a pallini sono il segno distintivo.
 */

@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;

  /* Pietra */
  --bg: #f1f2ee;
  --surface: #ffffff;
  --raised: #f7f8f5;
  --sunken: #e7eae5;
  --line: #d6dcd6;
  --line-strong: #b4beb7;
  --ink: #18201c;
  --ink-2: #4f5953;
  --ink-3: #6b746e;

  /* Verde bottiglia (il locale può sostituirlo con il suo colore: --brand) */
  --accent: var(--brand, #1f5b4a);
  --accent-ink: var(--brand-ink, #ffffff);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--surface));
  --accent-text: color-mix(in srgb, var(--accent) 92%, #000);

  /* Posti */
  --seat-on: var(--accent);
  --seat-off: #cdd4ce;

  /* Stati: separati dall'accento */
  --wait: #8a5300;
  --wait-bg: #fff1d6;
  --wait-line: #e6c27a;
  --ok: #1b6b3a;
  --ok-bg: #e2f2e6;
  --ok-line: #9fd0af;
  --bad: #b42318;
  --bad-bg: #fde8e5;
  --bad-line: #efada5;
  --on-bad: #ffffff;
  --info: var(--ink-2);
  --info-bg: var(--sunken);

  /* Profondità: solo ciò che galleggia ha un'ombra */
  --shadow-float: 0 18px 48px rgb(16 24 20 / 0.18), 0 2px 8px rgb(16 24 20 / 0.1);
  --scrim: rgb(14 20 17 / 0.44);

  /* Tipografia */
  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-ui: "Atkinson Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 44px;
  --lh-text: 1.45;
  --lh-title: 1.1;

  /* Spazi: griglia da 4 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Raggi per ruolo */
  --r-control: 8px;
  --r-surface: 12px;
  --r-sheet: 20px;
  --r-pill: 999px;

  /* Movimento */
  --t-fast: 120ms;
  --t-med: 150ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Area tattile minima */
  --tap: 44px;
}

/* Sala serale: scuro caldo, non blu-nero. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15130f;
    --surface: #1f1c18;
    --raised: #27231e;
    --sunken: #110f0c;
    --line: #38332c;
    --line-strong: #514a40;
    --ink: #efeae1;
    --ink-2: #b9b1a5;
    --ink-3: #958d81;
    --accent: var(--brand-dark, #7cc4a6);
    --accent-ink: var(--brand-dark-ink, #0f1d17);
    --accent-hover: color-mix(in srgb, var(--accent) 86%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
    --accent-text: var(--accent);
    --seat-off: #403a33;
    --wait: #f2b65a;
    --wait-bg: #3a2c14;
    --wait-line: #6b5226;
    --ok: #86d6a3;
    --ok-bg: #17311f;
    --ok-line: #2f5b3d;
    --bad: #ff9585;
    --bad-bg: #401f1a;
    --bad-line: #6e3a31;
    --on-bad: #2a0e0a;
    --shadow-float: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.4);
    --scrim: rgb(0 0 0 / 0.62);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15130f;
  --surface: #1f1c18;
  --raised: #27231e;
  --sunken: #110f0c;
  --line: #38332c;
  --line-strong: #514a40;
  --ink: #efeae1;
  --ink-2: #b9b1a5;
  --ink-3: #958d81;
  --accent: var(--brand-dark, #7cc4a6);
  --accent-ink: var(--brand-dark-ink, #0f1d17);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-text: var(--accent);
  --seat-off: #403a33;
  --wait: #f2b65a;
  --wait-bg: #3a2c14;
  --wait-line: #6b5226;
  --ok: #86d6a3;
  --ok-bg: #17311f;
  --ok-line: #2f5b3d;
  --bad: #ff9585;
  --bad-bg: #401f1a;
  --bad-line: #6e3a31;
  --on-bad: #2a0e0a;
  --shadow-float: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 8px rgb(0 0 0 / 0.4);
  --scrim: rgb(0 0 0 / 0.62);
}