/* =========================================================================
   Ciclovia del Tronto — design tokens
   Fondazione: Open Props (scala --size-*, --font-size-*, --radius-*, --ease-*,
   --layer-*), caricata da open-props.subset.css. Qui si aggiungono SOLO i ruoli
   colore e i ruoli tipografici del progetto, con la stessa convenzione di nomi
   di Open Props (--surface-*, --text-*, --brand, --font-*).
   Layout: carta tecnica del fiume — mappa a tutta larghezza, poi una griglia
   ordinata per chilometro.
   ========================================================================= */

:root {
  /* Superfici e testo: carta topografica, inchiostro verde-grigio */
  --surface-1: #ffffff;
  --surface-2: #f3f4f1;
  --surface-3: #e6e8e3;
  --surface-ink: #18211d;
  --text-1: #18211d;
  --text-2: #4a5650;
  --text-3: #6b766f;
  --text-on-ink: #eef0ea;
  --rule: #dcdfd8;
  --rule-strong: #7f8881;   /* bordo dei comandi: almeno 3:1 sul fondo */

  /* Accento: giallo segnaletica ciclabile (sempre con testo inchiostro sopra) */
  --brand: #e5b230;
  --brand-ink: #18211d;
  --brand-strong: #8a6510;

  /* Idrografia */
  --river: #4f8aa0;
  --sea: #c4d9e0;

  /* Difficoltà (forma + colore, vedi .diff) */
  --diff-1: #2c7a46;
  --diff-2: #2a5cb3;
  --diff-3: #b7341f;
  --diff-4: #141a17;

  /* Stato */
  --status-ok: #2c7a46;
  --status-warn: #9b6a00;
  --status-closed: #b7341f;

  /* Categorie dei luoghi (segnaposto e filtri) */
  --cat-vedere: #6a4a8c;
  --cat-dormire: #0e7480;
  --cat-mangiare: #b4581a;
  --cat-servizi: #55651c;
  /* strada e fondo (schede dei tratti): traffico dal più tranquillo (1) al più trafficato (4), fondo */
  --traffico-1: #86b6ef;
  --traffico-2: #3987e5;
  --traffico-3: #1c5cab;
  --traffico-4: #0d366b;
  --fondo-duro: #7f8881;
  --fondo-sterrato: #eb6834;

  /* Rilievo nella mappa 3D e 2D */
  --map-low: #f2f3ee;
  --map-mid: #dfe1d4;
  --map-high: #c8c6b5;
  --map-peak: #f6f5f1;
  --map-contour: #1f2a24;
  --map-sea: #c4d9e0;

  /* Pagina mappa: punto «sei qui» (i colori della mappa vettoriale vengono dagli altri token, vedi mappa-stile.js) */
  --geo: #1f6fd1;
  --on-cat: #ffffff;        /* icone e testo sopra i colori di categoria */
  --selected-bg: #18211d;   /* pulsanti e filtri attivi: pieno scuro in giorno, chiaro in notte */
  --selected-ink: #eef0ea;
  --shadow-rgb: 0 0 0;      /* ombre: rgb(var(--shadow-rgb) / .35) */
  --scrim-rgb: 8 11 9;      /* veli scuri sotto menu e foto */

  /* Tipografia: una sola famiglia variabile, larghezze diverse per ruolo */
  --font-sans: "Archivo", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --font-display-stretch: 72%;
  --font-label-stretch: 88%;
  --font-display-weight: 800;

  /* Scala tipografica di progetto, costruita sui --font-size-* di Open Props */
  /* estensione della scala Open Props, stessa convenzione */
  --font-size-05: .875rem;
  --type-label: var(--font-size-0);    /* .75rem, maiuscolo spaziato */
  --type-small: var(--font-size-05);   /* .875rem */
  --type-body: var(--font-size-1);     /* 1rem */
  --type-lead: var(--font-size-2);     /* 1.1rem */
  --type-h3: var(--font-size-3);       /* 1.25rem */
  --type-h2: clamp(var(--font-size-5), 3.4vw, var(--font-size-7));
  --type-h1: clamp(var(--font-size-6), 6vw, var(--font-size-8));
  --type-display: clamp(2.6rem, 6.2vw, 4.8rem);

  /* Layout */
  --page-max: 1240px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --header-h: 64px;
  --rule-w: 1px;
  /* anello doppio: l'interno inchiostro dà il contrasto su ogni fondo, l'esterno è il giallo del marchio */
  --focus-ring: 0 0 0 2px var(--text-1), 0 0 0 5px var(--brand);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-1: #121714;
    --surface-2: #1a201c;
    --surface-3: #242b26;
    --surface-ink: #0b0f0d;
    --text-1: #e6e9e2;
    --text-2: #aab3ab;
    --text-3: #87918a;
    --text-on-ink: #eef0ea;
    --rule: #2f3832;
    --rule-strong: #636e67;
    --brand: #e5b230;
    --brand-ink: #18211d;
    --brand-strong: #e5b230;
    --river: #6fa9be;
    --sea: #23383f;
    --diff-1: #4fb070;
    --diff-2: #6b98ea;
    --diff-3: #ee6b52;
    --diff-4: #e6e9e2;
    --status-ok: #4fb070;
    --status-warn: #e0a72a;
    --status-closed: #ee6b52;
    --map-low: #232b25;
    --map-mid: #2f382f;
    --map-high: #474a3d;
    --map-peak: #6a6a60;
    --map-contour: #e6e9e2;
    --map-sea: #1d3138;
    --geo: #5ea4ff;
    --on-cat: #0b0f0d;
    --selected-bg: #e6e9e2;
    --selected-ink: #121714;
    --shadow-rgb: 0 0 0;
    --scrim-rgb: 8 11 9;
    --cat-vedere: #b59ad8;
    --cat-dormire: #57bcc8;
    --cat-mangiare: #ec8d50;
    --cat-servizi: #b3c25a;
    --traffico-1: #184f95;
    --traffico-2: #2a78d6;
    --traffico-3: #6da7ec;
    --traffico-4: #b7d3f6;
    --fondo-duro: #7d8781;
    --fondo-sterrato: #d95926;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface-1: #121714;
  --surface-2: #1a201c;
  --surface-3: #242b26;
  --surface-ink: #0b0f0d;
  --text-1: #e6e9e2;
  --text-2: #aab3ab;
  --text-3: #87918a;
  --text-on-ink: #eef0ea;
  --rule: #2f3832;
  --rule-strong: #636e67;
  --brand: #e5b230;
  --brand-ink: #18211d;
  --brand-strong: #e5b230;
  --river: #6fa9be;
  --sea: #23383f;
  --diff-1: #4fb070;
  --diff-2: #6b98ea;
  --diff-3: #ee6b52;
  --diff-4: #e6e9e2;
  --status-ok: #4fb070;
  --status-warn: #e0a72a;
  --status-closed: #ee6b52;
  --map-low: #232b25;
  --map-mid: #2f382f;
  --map-high: #474a3d;
  --map-peak: #6a6a60;
  --map-contour: #e6e9e2;
  --map-sea: #1d3138;
  --geo: #5ea4ff;
  --on-cat: #0b0f0d;
  --selected-bg: #e6e9e2;
  --selected-ink: #121714;
  --shadow-rgb: 0 0 0;
  --scrim-rgb: 8 11 9;
  --cat-vedere: #b59ad8;
  --cat-dormire: #57bcc8;
  --cat-mangiare: #ec8d50;
  --cat-servizi: #b3c25a;
  --traffico-1: #184f95;
  --traffico-2: #2a78d6;
  --traffico-3: #6da7ec;
  --traffico-4: #b7d3f6;
  --fondo-duro: #7d8781;
  --fondo-sterrato: #d95926;
  color-scheme: dark;
}

/* Scelta fatta con l'interruttore del sito: vince sia sul dispositivo sia sul tema del visualizzatore.
   Usa un attributo proprio (data-tema), così il visualizzatore non può sovrascriverla. */
:root[data-tema="giorno"] {
  --surface-1: #ffffff;
  --surface-2: #f3f4f1;
  --surface-3: #e6e8e3;
  --surface-ink: #18211d;
  --text-1: #18211d;
  --text-2: #4a5650;
  --text-3: #6b766f;
  --text-on-ink: #eef0ea;
  --rule: #dcdfd8;
  --rule-strong: #7f8881;   /* bordo dei comandi: almeno 3:1 sul fondo */
  --brand: #e5b230;
  --brand-ink: #18211d;
  --brand-strong: #8a6510;
  --river: #4f8aa0;
  --sea: #c4d9e0;
  --diff-1: #2c7a46;
  --diff-2: #2a5cb3;
  --diff-3: #b7341f;
  --diff-4: #141a17;
  --status-ok: #2c7a46;
  --status-warn: #9b6a00;
  --status-closed: #b7341f;
  --map-low: #f2f3ee;
  --map-mid: #dfe1d4;
  --map-high: #c8c6b5;
  --map-peak: #f6f5f1;
  --map-contour: #1f2a24;
  --map-sea: #c4d9e0;
  --geo: #1f6fd1;
  --on-cat: #ffffff;        /* icone e testo sopra i colori di categoria */
  --selected-bg: #18211d;   /* pulsanti e filtri attivi: pieno scuro in giorno, chiaro in notte */
  --selected-ink: #eef0ea;
  --shadow-rgb: 0 0 0;      /* ombre: rgb(var(--shadow-rgb) / .35) */
  --scrim-rgb: 8 11 9;      /* veli scuri sotto menu e foto */
  --cat-vedere: #6a4a8c;
  --cat-dormire: #0e7480;
  --cat-mangiare: #b4581a;
  --cat-servizi: #55651c;
  --traffico-1: #86b6ef;
  --traffico-2: #3987e5;
  --traffico-3: #1c5cab;
  --traffico-4: #0d366b;
  --fondo-duro: #7f8881;
  --fondo-sterrato: #eb6834;
  color-scheme: light;
}
:root[data-tema="notte"] {
  --surface-1: #121714;
  --surface-2: #1a201c;
  --surface-3: #242b26;
  --surface-ink: #0b0f0d;
  --text-1: #e6e9e2;
  --text-2: #aab3ab;
  --text-3: #87918a;
  --text-on-ink: #eef0ea;
  --rule: #2f3832;
  --rule-strong: #636e67;
  --brand: #e5b230;
  --brand-ink: #18211d;
  --brand-strong: #e5b230;
  --river: #6fa9be;
  --sea: #23383f;
  --diff-1: #4fb070;
  --diff-2: #6b98ea;
  --diff-3: #ee6b52;
  --diff-4: #e6e9e2;
  --status-ok: #4fb070;
  --status-warn: #e0a72a;
  --status-closed: #ee6b52;
  --map-low: #232b25;
  --map-mid: #2f382f;
  --map-high: #474a3d;
  --map-peak: #6a6a60;
  --map-contour: #e6e9e2;
  --map-sea: #1d3138;
  --geo: #5ea4ff;
  --on-cat: #0b0f0d;
  --selected-bg: #e6e9e2;
  --selected-ink: #121714;
  --shadow-rgb: 0 0 0;
  --scrim-rgb: 8 11 9;
  --cat-vedere: #b59ad8;
  --cat-dormire: #57bcc8;
  --cat-mangiare: #ec8d50;
  --cat-servizi: #b3c25a;
  --traffico-1: #184f95;
  --traffico-2: #2a78d6;
  --traffico-3: #6da7ec;
  --traffico-4: #b7d3f6;
  --fondo-duro: #7d8781;
  --fondo-sterrato: #d95926;
  color-scheme: dark;
}