/* =============================================================================
   TEMA — «carta topografica viva»
   =============================================================================

   Da dove viene questa identità, perché sia discutibile e non solo guardabile.

   Ogni applicazione per funghi che esiste ha lo stesso aspetto: una fotografia
   di un porcino nel muschio, verde acceso, e un pulsante. È un vestito che non
   dice niente su cosa c'è dentro — e in questo caso direbbe anche una bugia,
   perché una fotografia di funghi promette implicitamente «guarda che roba
   troverai», che è esattamente ciò che questo strumento non fa e dichiara di
   non fare in ogni sua pagina.

   Il linguaggio visivo viene invece da quello che l'applicazione LEGGE
   davvero: carte, quote, isoipse, la maglia chilometrica dei pluviometri, le
   bande di quota, le isoiete. È il mondo di chi ha scritto il modello, ed è
   anche l'unica promessa che il prodotto può mantenere: qui si misura un
   terreno, non si indica un posto.

   I verdi sono quelli della vegetazione su una carta topografica — cupi,
   stampati, un po' polverosi — non i verdi fotografici del sottobosco.
   Il tema scuro non è il tema chiaro invertito: è la stessa carta letta di
   notte, con le curve che si accendono appena.
   ========================================================================== */

:root {
  /* --- fondo e inchiostro ------------------------------------------------ */
  --carta:        #eef1e9;   /* carta della tavoletta, grigio-verde */
  --carta-alta:   #f7f9f4;   /* rilievo: schede, riquadri */
  --carta-bassa:  #e3e8dc;   /* incavo: fasce, campiture */
  --inchiostro:   #0f1d15;   /* verde-nero, non nero */
  --inchiostro-2: #47564b;   /* testo secondario */
  --inchiostro-3: #77836f;   /* didascalie, unità di misura */
  --tratto:       #cfd8c5;   /* linee sottili */
  --tratto-fioco: #e0e6d9;

  /* --- verdi: la vegetazione di una carta, non una fotografia ------------ */
  --bosco:        #1c5638;   /* il verde principale */
  --bosco-cupo:   #123526;
  --germoglio:    #3f9663;   /* accento vivo, per ciò su cui si tocca */
  --bosco-velo:   #dfe9dd;   /* campitura leggera */

  /* --- il resto della legenda -------------------------------------------- */
  --acqua:        #2a6b8c;   /* pioggia, misure idriche */
  --acqua-velo:   #dde9ef;
  --ruggine:      #a8552b;   /* avvertenze oneste, limiti */
  --ruggine-velo: #f2e4da;
  --ambra:        #9a7318;   /* attesa, finestra in apertura */
  --ambra-velo:   #f4ecd7;

  /* --- bande di quota: la scala ipsometrica di una carta ----------------- */
  --quota-1: #cfdcc0;
  --quota-2: #b9cda6;
  --quota-3: #d8d5ab;
  --quota-4: #d6c39a;
  --quota-5: #c9ac86;

  /* --- isoipse ------------------------------------------------------------ */
  --isoipsa:        rgba(28, 86, 56, .30);
  --isoipsa-madre:  rgba(28, 86, 56, .52);   /* curva direttrice, ogni cinque */
  --maglia:         rgba(28, 86, 56, .085);  /* la griglia chilometrica DPC */

  /* --- misure ------------------------------------------------------------- */
  --r-min: 8px;
  --r: 14px;
  --r-max: 22px;
  --ombra: 0 1px 2px rgba(15, 29, 21, .05), 0 10px 30px rgba(15, 29, 21, .06);
  --ombra-alta: 0 2px 6px rgba(15, 29, 21, .07), 0 22px 60px rgba(15, 29, 21, .10);

  /* --- caratteri ---------------------------------------------------------- */
  /* Archivo in larghezza espansa per i titoli: istituzionale, netto, con la
     compattezza di un'etichetta di carta. Source Serif per la prosa, perché
     «professionale» qui vuol dire che si legge come un documento e non come
     una pubblicità. Plex Mono per tutto ciò che è una misura: coordinate,
     millimetri, gradi, date. */
  --tipo-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;   /* variabile: wdth 100-125, wght 400-700 */
  --tipo-prosa:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --tipo-dato:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

/* La carta letta di notte. Le curve si accendono, il fondo va sotto il verde
   del bosco cupo invece che al nero: un nero puro qui sembrerebbe un'altra
   applicazione. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --carta:        #0a120c;
    --carta-alta:   #121b14;
    --carta-bassa:  #070d09;
    --inchiostro:   #e6ece1;
    --inchiostro-2: #a3ae9c;
    --inchiostro-3: #78836f;
    --tratto:       #26301f;
    --tratto-fioco: #1b241a;

    --bosco:        #5cb37e;
    --bosco-cupo:   #0e2a1c;
    --germoglio:    #7ed19b;
    --bosco-velo:   #14251a;

    --acqua:        #74b0d0;
    --acqua-velo:   #12212a;
    --ruggine:      #d18b5f;
    --ruggine-velo: #2a1a12;
    --ambra:        #d9b45c;
    --ambra-velo:   #26200e;

    --quota-1: #1a2718;
    --quota-2: #223020;
    --quota-3: #2b3222;
    --quota-4: #332f21;
    --quota-5: #3a2f20;

    --isoipsa:       rgba(126, 209, 155, .20);
    --isoipsa-madre: rgba(126, 209, 155, .38);
    --maglia:        rgba(126, 209, 155, .06);

    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .45), 0 22px 60px rgba(0, 0, 0, .45);
  }
}

:root[data-tema="scuro"] {
  --carta:        #0a120c;
  --carta-alta:   #121b14;
  --carta-bassa:  #070d09;
  --inchiostro:   #e6ece1;
  --inchiostro-2: #a3ae9c;
  --inchiostro-3: #78836f;
  --tratto:       #26301f;
  --tratto-fioco: #1b241a;
  --bosco:        #5cb37e;
  --bosco-cupo:   #0e2a1c;
  --germoglio:    #7ed19b;
  --bosco-velo:   #14251a;
  --acqua:        #74b0d0;
  --acqua-velo:   #12212a;
  --ruggine:      #d18b5f;
  --ruggine-velo: #2a1a12;
  --ambra:        #d9b45c;
  --ambra-velo:   #26200e;
  --quota-1: #1a2718; --quota-2: #223020; --quota-3: #2b3222; --quota-4: #332f21; --quota-5: #3a2f20;
  --isoipsa:       rgba(126, 209, 155, .20);
  --isoipsa-madre: rgba(126, 209, 155, .38);
  --maglia:        rgba(126, 209, 155, .06);
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --ombra-alta: 0 2px 6px rgba(0, 0, 0, .45), 0 22px 60px rgba(0, 0, 0, .45);
}