/* Seduta Sospesa · token di Yeah We Do (stesso repo ../web): palette «Marea viva», scuro «Petrolio velato»
 * Copiati 1:1 da web/public/assets/css/tokens.css; il blocco scuro è ripetuto
 * per [data-theme="dark"], così la pagina segue anche un tema scelto a mano.
 * vibe: "mare all'alba, respiro lento, mani che sostengono"
 * paper oklch(97.7% 0.009 84.6) · accent oklch(49.2% 0.084 187.1) Marea · warm oklch(77.4% 0.147 68.4) Primo Sole
 * display: Gabarito · body: Inter — gli stessi font dell'app
 * axes: light / geometric-sans / cool (teal)
 * Colori 1:1 con lib/shared/theme/therapeutic_colors.dart dell'app (hex → OKLCH).
 */

@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/gabarito-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Gabarito";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../fonts/gabarito-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /* Superfici — sabbia «Salina» */
  --color-paper: oklch(97.7% 0.009 84.6);
  --color-paper-2: oklch(95.1% 0.012 79.8);
  --color-sunk: oklch(93.6% 0.015 80.7);
  --color-card: oklch(99.4% 0.004 84.6);
  --color-rule: oklch(91.8% 0.016 82.8);

  /* Inchiostro «Abisso» */
  --color-ink: oklch(28.1% 0.038 189.6);
  --color-ink-2: oklch(48.3% 0.028 183.3);
  --color-deep: oklch(33.7% 0.055 187.5);
  --color-deepest: oklch(24% 0.031 188.3);

  /* Mare «Marea» — primario e CTA */
  --color-accent: oklch(49.2% 0.084 187.1);
  --color-accent-strong: oklch(42% 0.078 187.5);
  --color-mint: oklch(92.6% 0.037 181.7);
  --color-breath: oklch(83.6% 0.058 185.1);
  --color-felce: oklch(58.8% 0.103 157.4);

  /* «Primo Sole» — unico accento caldo, gesti verso una persona */
  --color-sun: oklch(77.4% 0.147 68.4);
  --color-sun-soft: oklch(94.8% 0.037 75.2);
  --color-sun-ink: oklch(49.5% 0.105 64.4);

  /* «Coccio» — esclusivo SOS */
  --color-sos: oklch(57.7% 0.182 31.3);
  --color-sos-deep: oklch(49.3% 0.157 31.8);

  /* Perla del marchio */
  --color-pearl: oklch(85.4% 0.054 80);

  /* Su fondo scuro */
  --color-on-deep: oklch(96.5% 0.012 84.6);
  --color-on-deep-2: oklch(84% 0.03 185);

  --color-focus: oklch(49.2% 0.084 187.1);
  --color-focus-on-deep: oklch(83.6% 0.058 185.1);

  /* Ruoli, come MareaPalette nell'app: i componenti leggono questi, e il
     tema scuro qui sotto cambia i valori, non i componenti. */
  --color-abyss: oklch(28.1% 0.038 189.6);       /* Abisso fisso: testo sui pieni chiari */
  --color-cta: oklch(49.2% 0.084 187.1);         /* il pieno dei pulsanti d'azione */
  --color-cta-strong: oklch(42% 0.078 187.5);
  --color-solid: oklch(28.1% 0.038 189.6);       /* pulsanti store sul fondo della pagina */
  --color-on-solid: oklch(96.5% 0.012 84.6);
  --color-solid-hover: oklch(33.7% 0.055 187.5);
  --surface-mint: oklch(92.6% 0.037 181.7);      /* pastelli come superficie */
  --surface-sun: oklch(94.8% 0.037 75.2);
  --surface-breath: oklch(83.6% 0.058 185.1);
  --surface-sos: oklch(57.7% 0.182 31.3 / 0.12);

  /* «Mare di notte» di Respira e 5-4-3-2-1: sempre scuro, in tutti e due i temi */
  --color-night: oklch(20.1% 0.026 195.3);       /* immersiveNight #061A1A */
  --color-horizon: oklch(31.8% 0.048 186.5);     /* immersiveHorizon #0E3A36 */
  --color-healing: oklch(50.8% 0.085 183);       /* healingTeal #16756A */
  --sea-glow: oklch(50.8% 0.085 183 / 0.28);
  --sea-glow-0: oklch(50.8% 0.085 183 / 0);
  --sea-back: oklch(50.8% 0.085 183 / 0.3);
  --sea-mid: oklch(49.2% 0.084 187.1 / 0.55);
  --sea-front: color-mix(in srgb, oklch(49.2% 0.084 187.1) 80%, oklch(20.1% 0.026 195.3));
  --sea-crest-mid: oklch(92.6% 0.037 181.7 / 0.18);
  --sea-crest-front: oklch(83.6% 0.058 185.1 / 0.5);
  --plankton: oklch(92.6% 0.037 181.7 / 0.3);
  --plankton-dim: oklch(92.6% 0.037 181.7 / 0.12);
  --orb-halo: oklch(83.6% 0.058 185.1 / 0.32);
  --orb-halo-0: oklch(83.6% 0.058 185.1 / 0);
  --glass-light: oklch(100% 0 0 / 0.16);
  --glass-light-strong: oklch(100% 0 0 / 0.26);
  --line-light: oklch(100% 0 0 / 0.35);

  /* Veli per leggibilità sopra i video */
  --veil-paper: oklch(97.7% 0.009 84.6 / 0.86);
  --veil-paper-mid: oklch(97.7% 0.009 84.6 / 0.55);
  --veil-paper-0: oklch(97.7% 0.009 84.6 / 0);
  --veil-deep: oklch(24% 0.031 188.3 / 0.72);
  --veil-deep-soft: oklch(24% 0.031 188.3 / 0.3);
  --veil-deep-0: oklch(24% 0.031 188.3 / 0);
  --glass-deep: oklch(24% 0.031 188.3 / 0.6);
  --line-on-deep: oklch(96.5% 0.012 84.6 / 0.16);
  --water-top: oklch(49.2% 0.084 187.1 / 0.82);
  --zone-fill: oklch(49.2% 0.084 187.1 / 0.14);
  --halo-ink: oklch(28.1% 0.038 189.6 / 0.16);
  --bloom-accent: oklch(49.2% 0.084 187.1 / 0.38);
  --sos-soft: oklch(57.7% 0.182 31.3 / 0.12);
  --shadow-ink: oklch(28.1% 0.038 189.6 / 0.16);
  --shadow-ink-strong: oklch(28.1% 0.038 189.6 / 0.28);

  /* Tipografia */
  --font-display: "Gabarito", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --text-h2: clamp(2.125rem, 1.4rem + 3vw, 4rem);
  --text-display: clamp(2.25rem, 1.3rem + 5vw, 5.75rem);
  --text-statement: clamp(3rem, 1.6rem + 7vw, 8.5rem);

  /* Spazio — scala 4 pt */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --measure: 38rem;
  --page-max: 82rem;

  /* Raggi — come l'app: 12 pulsanti, 20 card, 28 schermate, pill */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --rule-hair: 1px solid var(--color-rule);

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Curve.easeInOutSine del BreathClock dell'app */
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-micro: 150ms;
  --dur-short: 240ms;
  --dur-long: 600ms;
  --dur-scene: 1100ms;
  /* BreathClock: mezzo ciclo 5,5 s → 5,45 respiri al minuto */
  --dur-breath: 11s;
}

/* ───────── Tema scuro «Petrolio velato» (app, A3a, scelta del 31/10) ─────────
 * Segue il telefono, come farà l'app. Un petrolio con metà della tinta su
 * fondo e card, testi quasi neutri: il teal sta negli accenti, non sulle
 * superfici. Le card sono un gradino più chiare del fondo; i pastelli
 * diventano una velatura del 14% sulla card (pastelStrength), perché un
 * blocco chiaro di notte abbaglia. Le scene già scure (video, Respira,
 * footer) restano come sono. Valori 1:1 con therapeutic_colors.dart.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-paper: oklch(21.3% 0.013 187.8);       /* nightBackground #121B1A */
    --color-paper-2: oklch(19.6% 0.012 186.8);     /* nightBackgroundDeep #0F1716 */
    --color-sunk: oklch(31.2% 0.019 185.5);        /* nightSunk #263432 */
    --color-card: oklch(26.1% 0.017 183.6);        /* nightCard #1B2725 */
    --color-rule: oklch(33.9% 0.019 185.6);        /* nightHairline #2D3B39 */

    --color-ink: oklch(94.4% 0.003 174.5);         /* nightInk #EAEDEC */
    --color-ink-2: oklch(75.6% 0.015 180.6);       /* nightMuted #A6B3B0 */

    --color-accent: oklch(75.5% 0.099 183.7);      /* mareaLight #5CC4B6 */
    --color-accent-strong: oklch(75.5% 0.099 183.7);
    --color-felce: oklch(76.8% 0.099 156.8);       /* felceLight #7CC79A */
    --color-cta: oklch(51.7% 0.088 186.6);         /* mareaNight #0C7870 */
    --color-cta-strong: oklch(42.2% 0.071 186.8);  /* mareaNightDeep #085A54 */

    --color-solid: oklch(96.5% 0.012 84.6);
    --color-on-solid: oklch(28.1% 0.038 189.6);
    --color-solid-hover: oklch(92.6% 0.037 181.7);

    --surface-mint: color-mix(in oklch, oklch(26.1% 0.017 183.6) 86%, oklch(92.6% 0.037 181.7));
    --surface-sun: color-mix(in oklch, oklch(26.1% 0.017 183.6) 86%, oklch(77.4% 0.147 68.4));
    --surface-breath: color-mix(in oklch, oklch(26.1% 0.017 183.6) 86%, oklch(83.6% 0.058 185.1));
    --surface-sos: oklch(57.7% 0.182 31.3 / 0.16);

    --color-focus: oklch(75.5% 0.099 183.7);

    --veil-paper: oklch(21.3% 0.013 187.8 / 0.86);
    --veil-paper-mid: oklch(21.3% 0.013 187.8 / 0.55);
    --veil-paper-0: oklch(21.3% 0.013 187.8 / 0);
    --zone-fill: oklch(75.5% 0.099 183.7 / 0.14);
    --halo-ink: oklch(94.4% 0.003 174.5 / 0.16);
    --shadow-ink: oklch(0% 0 0 / 0.4);
    --shadow-ink-strong: oklch(0% 0 0 / 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-paper: oklch(21.3% 0.013 187.8);       /* nightBackground #121B1A */
  --color-paper-2: oklch(19.6% 0.012 186.8);     /* nightBackgroundDeep #0F1716 */
  --color-sunk: oklch(31.2% 0.019 185.5);        /* nightSunk #263432 */
  --color-card: oklch(26.1% 0.017 183.6);        /* nightCard #1B2725 */
  --color-rule: oklch(33.9% 0.019 185.6);        /* nightHairline #2D3B39 */

  --color-ink: oklch(94.4% 0.003 174.5);         /* nightInk #EAEDEC */
  --color-ink-2: oklch(75.6% 0.015 180.6);       /* nightMuted #A6B3B0 */

  --color-accent: oklch(75.5% 0.099 183.7);      /* mareaLight #5CC4B6 */
  --color-accent-strong: oklch(75.5% 0.099 183.7);
  --color-felce: oklch(76.8% 0.099 156.8);       /* felceLight #7CC79A */
  --color-cta: oklch(51.7% 0.088 186.6);         /* mareaNight #0C7870 */
  --color-cta-strong: oklch(42.2% 0.071 186.8);  /* mareaNightDeep #085A54 */

  --color-solid: oklch(96.5% 0.012 84.6);
  --color-on-solid: oklch(28.1% 0.038 189.6);
  --color-solid-hover: oklch(92.6% 0.037 181.7);

  --surface-mint: color-mix(in oklch, oklch(26.1% 0.017 183.6) 86%, oklch(92.6% 0.037 181.7));
  --surface-sun: color-mix(in oklch, oklch(26.1% 0.017 183.6) 86%, oklch(77.4% 0.147 68.4));
  --surface-breath: color-mix(in oklch, oklch(26.1% 0.017 183.6) 86%, oklch(83.6% 0.058 185.1));
  --surface-sos: oklch(57.7% 0.182 31.3 / 0.16);

  --color-focus: oklch(75.5% 0.099 183.7);

  --veil-paper: oklch(21.3% 0.013 187.8 / 0.86);
  --veil-paper-mid: oklch(21.3% 0.013 187.8 / 0.55);
  --veil-paper-0: oklch(21.3% 0.013 187.8 / 0);
  --zone-fill: oklch(75.5% 0.099 183.7 / 0.14);
  --halo-ink: oklch(94.4% 0.003 174.5 / 0.16);
  --shadow-ink: oklch(0% 0 0 / 0.4);
  --shadow-ink-strong: oklch(0% 0 0 / 0.6);
}