/* ============================================================
   TEMA: opala
   Il tema del sito di Opala, nel formato dei temi di Ordito.
   Il gestionale usa indigo; il sito prende i colori dal logo:
   il blu petrolio del contorno e l'azzurro del secondo tratto.

   Neutri freddi, virati al petrolio: il bianco dello smalto,
   non il crema della carta.

   Carattere: Atkinson Hyperlegible Next, disegnato per farsi
   leggere da chiunque, anche da lontano e da chi vede poco.
   È la promessa del programma: capire a colpo d'occhio.
   Ospitato sul sito, come tutto il resto.
   ============================================================ */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../caratteri/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("../caratteri/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations");
}

:root[data-theme="opala"] {
  --theme-name: "opala";
  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* neutro: smalto, freddo, virato al petrolio */
  --n-1:#fbfcfc; --n-2:#f4f7f8; --n-3:#ebf0f2;  --n-4:#e2e9ec;
  --n-5:#d8e1e5; --n-6:#cbd6db; --n-7:#b8c7ce;  --n-8:#9db0b9;
  --n-9:#7a8e97; --n-10:#6e828b; --n-11:#4c5f68; --n-12:#142d39;

  /* accento: il petrolio del logo */
  --a-1:#fafdfe; --a-2:#f1f8fa; --a-3:#e2f0f5;  --a-4:#d1e7ef;
  --a-5:#bedbe7; --a-6:#a6ccdc; --a-7:#86b8cc;  --a-8:#5e9db7;
  --a-9:#4588a4; --a-10:#3a7c97; --a-11:#2b6580; --a-12:#184157;

  /* Lo step 9 è l'azzurro del logo, ma con il bianco si ferma a 3,96:1.
     Il colore che porta testo è più scuro: 5,97:1. */
  --accent-solid: #2f6a84;
  --on-accent: #ffffff;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;

  /* I due colori del logo appartengono al marchio, non al tema. */
  --logo-scuro: #184157;
  --logo-chiaro: #4588a4;

  /* L'unica campitura del sito, uguale in chiaro e in scuro: il petrolio
     del logo, appena più profondo, con i suoi testi. */
  --campitura: #163a4e;
  --su-campitura: #e7eff2;
  --su-campitura-tenue: #a9c3cf;
  --campitura-linea: #5fa6c4;

  /* Il biscotto del biglietto dei cookie: qui il colore è il disegno,
     come i colori del logo. */
  --biscotto-pasta: #d7a35e;
  --biscotto-gocce: #5b3920;

  /* Due taglie in più per il sito: il gestionale non ne ha bisogno. */
  --fs-72: 4.5rem;
  --fs-96: 6rem;
  --fs-display: clamp(2.5rem, 1.1rem + 4.6vw, 5.25rem);
}

:root[data-theme="opala"][data-mode="dark"] {
  --n-1:#0e1518; --n-2:#131c20; --n-3:#18242a;  --n-4:#1d2b32;
  --n-5:#23333b; --n-6:#2b3d46; --n-7:#364b55;  --n-8:#476270;
  --n-9:#5f7883; --n-10:#6d8690; --n-11:#a9bcc4; --n-12:#e7eff2;

  --a-1:#0c1619; --a-2:#10202a; --a-3:#132c38;  --a-4:#163646;
  --a-5:#1a4153; --a-6:#1f4d62; --a-7:#275d76;  --a-8:#2f7291;
  --a-9:#4588a4; --a-10:#579ab6; --a-11:#8fc3da; --a-12:#d5ebf4;

  /* 4,9:1 con il bianco */
  --accent-solid: #387895;
  --on-accent: #ffffff;

  --logo-scuro: #d3e4ec;
  --logo-chiaro: #5fa6c4;

  --biscotto-pasta: #c89452;
  --biscotto-gocce: #3e2615;
}