/* readabit - token di stile
 *
 * QUESTO E' L'UNICO FILE IN CUI VIVONO I TOKEN.
 * I template lo referenziano, non lo ricopiano:
 *
 *     <link rel="stylesheet" href="/static/tokens.css">
 *
 * Un valore letterale (un colore, una misura, un font) scritto dentro un
 * template o dentro un altro foglio di stile e' un difetto, non una scelta:
 * va sostituito con una var(--...) di qui, oppure il token che manca va
 * aggiunto qui. Vedi docs/design/style-guide.md.
 *
 * Cosa NON troverai qui, deliberatamente (vedi la sezione "Vietato" della
 * style guide): nessun token per un contatore, nessun token per un badge,
 * nessuna coppia verde/rosso da usare come merito o demerito, nessun token
 * per una barra di navigazione persistente. Un token assente e' il modo piu'
 * economico di rendere difficile una violazione.
 */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- Colore
   * Una carta calda, un inchiostro caldo, UN SOLO accento.
   * L'accento marca l'azione principale, mai un giudizio.
   */
  --paper:        #fbf9f5;   /* fondo della pagina */
  --paper-raised: #fffdfa;   /* la proposta, l'unica superficie sollevata */
  --paper-sunken: #f4f1ea;   /* "Stavi leggendo", il pescaggio dal limbo */

  --ink:       #23201c;      /* titoli e testo che si legge */
  --ink-soft:  #57514a;      /* fonte, reading time, anteprima */
  --ink-faint: #8c857c;      /* meta discreta, etichette delle statistiche */

  --rule: #e6e0d6;           /* separatori: 1px, mai un bordo pesante */

  --accent:       #2f6f6b;   /* "Leggi adesso" e nient'altro di prominente */
  --accent-hover: #275c58;
  --accent-soft:  #dfebe9;   /* fondo tenue, non un evidenziatore */

  /* Il rosso esiste per UNA cosa sola: la conferma di cancellazione
   * dell'account, dove l'irreversibilita' va dichiarata. Non e' un colore
   * di stato, non e' un colore di errore di lettura, e non entra mai nelle
   * statistiche. */
  --danger: #8c2f1f;

  /* Dati delle statistiche: UNA sola tinta, quattro gradini di intensita'.
   * Non e' una scala semantica: piu' scuro non significa "meglio", significa
   * soltanto "piu' grande". Nessun hue alternativo, cosi' che un istogramma
   * non possa nemmeno accidentalmente colorare una settimana di verde e
   * un'altra di rosso. */
  --data-1: #2f6f6b;
  --data-2: #5c908c;
  --data-3: #8bb0ad;
  --data-4: #bdd2d0;
  --data-empty: #ece7de;     /* una barra a zero: presente, non allarmante */

  --focus: #2f6f6b;          /* anello di focus visibile, 2px, sempre */

  /* ------------------------------------------------------------ Tipografia
   * Serif per cio' che si legge (il titolo di un Link), sans di sistema per
   * cio' che si usa. Nessun webfont: un font che arriva in ritardo fa
   * sfarfallare l'unica schermata protetta del prodotto.
   */
  --font-read: Charter, "Iowan Old Style", "Palatino Linotype", Palatino,
               Georgia, "Times New Roman", serif;
  --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               sans-serif;
  --font-num:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.8125rem;   /* 13px - meta, etichette */
  --text-sm:   0.9375rem;   /* 15px - fonte, reading time */
  --text-base: 1.0625rem;   /* 17px - testo corrente */
  --text-lg:   1.25rem;     /* 20px - titolo di un Link in lista */
  --text-xl:   1.5rem;      /* 24px - messaggi di Pausa e Collezione vuota */
  --text-2xl:  1.875rem;    /* 30px - titolo della Proposta, il piu' grande */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-strong: 600;     /* il massimo: niente 700, niente maiuscolo */

  --leading-tight:  1.25;   /* titoli */
  --leading-normal: 1.55;   /* interfaccia */
  --leading-loose:  1.7;    /* paragrafi di testo */

  --measure:       66ch;    /* 45-90 caratteri per riga */
  --measure-short: 46ch;    /* messaggi brevi: Pausa, Collezione vuota */

  /* ------------------------------------------------------------- Spaziatura
   * Scala di 4px. Nessun valore fuori scala.
   */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  --page-max:    38rem;     /* la pagina e' stretta: una cosa alla volta */
  --page-gutter: var(--space-5);

  /* Il respiro attorno alla Proposta e' un token, non un caso: e' la
   * gerarchia. Ridurlo per far entrare qualcos'altro sopra la Proposta e'
   * una modifica di prodotto, non di stile. */
  --proposal-breath: var(--space-8);

  /* --------------------------------------------------------------- Forma */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --border-hair: 1px;
  --border-focus: 2px;

  /* Una sola ombra, tenue, per la sola superficie sollevata. */
  --shadow-raised: 0 1px 2px rgba(35, 32, 28, 0.05),
                   0 4px 16px rgba(35, 32, 28, 0.04);

  /* ----------------------------------------------------------- Movimento
   * Lento e breve. Niente animazioni celebrative, niente rimbalzi. */
  --duration-fast: 120ms;
  --duration-slow: 240ms;
  --easing: cubic-bezier(0.2, 0, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #171614;
    --paper-raised: #201e1b;
    --paper-sunken:  #131211;

    --ink:       #ede8e0;
    --ink-soft:  #b6afa5;
    --ink-faint: #8a8379;

    --rule: #322e29;

    --accent:       #7fb8b3;
    --accent-hover: #96c7c3;
    --accent-soft:  #22322f;

    --danger: #d98070;

    --data-1: #7fb8b3;
    --data-2: #659793;
    --data-3: #4a7572;
    --data-4: #325450;
    --data-empty: #262320;

    --focus: #7fb8b3;

    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3),
                     0 4px 16px rgba(0, 0, 0, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-slow: 0ms;
  }
}