/* Rabbit OS 3 — design tokens
   ----------------------------------------------------------------------------
   Direzione: "registro dell'ufficio tributi". Inchiostro blu per la struttura,
   carta fredda per il fondo, rosso timbro riservato a scadenze e ritardi, verde
   archivio per ciò che è chiuso. Un solo carattere (IBM Plex Sans variabile):
   la larghezza stretta è il "timbro" per codici, date e importi.

   Architettura CSS
   - Cascade layers: l'ordine qui sotto decide le precedenze, non la specificità.
     Niente !important per vincere una regola: si sposta la regola nel layer giusto.
   - Un solo colore di marca (--brand) da cui deriva l'intera scala d'accento,
     così ogni azienda può avere il suo colore (r3_company_settings.primary).
   - Ruoli semantici (--text, --surface, --danger…) usati dai componenti; le
     tinte grezze (--ink-*, --stamp…) non si usano direttamente nei moduli.
   - Temi: chiaro, scuro, automatico; contrasto elevato; densità compatta.
   ---------------------------------------------------------------------------- */

@layer reset, tokens, base, components, shell, modules, utilities;

@font-face{
  font-family:"Plex";
  src:url("../fonts/plex-sans-var.woff") format("woff");
  font-weight:100 700; font-stretch:85% 100%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Plex";
  src:url("../fonts/plex-sans-italic-var.woff") format("woff");
  font-weight:100 700; font-stretch:85% 100%; font-style:italic; font-display:swap;
}

@layer tokens{
  :root{
    color-scheme:light;

    /* --- Marca: un solo valore, il resto si deriva -------------------------- */
    --brand:#2a56c6;       /* blu Rabbit; ogni studio sceglie il suo in Impostazioni → Aspetto */

    /* --- Tinte grezze -------------------------------------------------------- */
    --ink-950:#0b1628;
    --ink-900:#0f1d33;     /* inchiostro: sidebar, testo forte */
    --ink-800:#18294a;
    --ink-700:#243a63;
    --ink-500:#51607a;
    --ink-400:#6d7a90;
    --ink-300:#9aa4b5;
    --paper:color-mix(in oklch,var(--brand) 3%,#f0f3f3);   /* carta chiara con un velo del colore dello studio */
    --paper-2:color-mix(in oklch,var(--brand) 5%,#e5e9ea);
    --sheet:#ffffff;
    --stamp:#b3322b;       /* rosso timbro */
    --archive:#23735f;     /* verde archivio */
    --ochre:#a8680f;       /* attesa */
    --violet:#6b4bb8;      /* persone */

    /* --- Ruoli semantici ----------------------------------------------------- */
    --bg:var(--paper);
    --surface:var(--sheet);
    --surface-2:color-mix(in oklch,var(--paper) 35%,var(--sheet));
    --surface-sunk:var(--paper-2);
    --surface-raised:var(--sheet);
    --text:var(--ink-900);
    --text-2:color-mix(in oklch,var(--ink-900) 78%,var(--ink-400));
    --muted:var(--ink-500);
    --faint:var(--ink-300);
    --line:color-mix(in oklch,var(--ink-500) 22%,var(--sheet));
    --line-soft:color-mix(in oklch,var(--ink-500) 12%,var(--sheet));
    --line-strong:color-mix(in oklch,var(--ink-500) 40%,var(--sheet));

    --accent:var(--brand);
    --accent-strong:color-mix(in oklch,var(--brand) 82%,black);
    --accent-soft:color-mix(in oklch,var(--brand) 9%,var(--sheet));
    --accent-tint:color-mix(in oklch,var(--brand) 18%,var(--sheet));
    --on-accent:#ffffff;

    --danger:var(--stamp);
    --danger-soft:color-mix(in oklch,var(--stamp) 9%,var(--sheet));
    --ok:var(--archive);
    --ok-soft:color-mix(in oklch,var(--archive) 10%,var(--sheet));
    --warn:var(--ochre);
    --warn-soft:color-mix(in oklch,var(--ochre) 11%,var(--sheet));
    --people:var(--violet);
    --people-soft:color-mix(in oklch,var(--violet) 9%,var(--sheet));
    --focus:color-mix(in oklch,var(--brand) 85%,white);
    --info:#2f62d0;        /* eventi e appuntamenti: blu fisso, non segue il colore dello studio */

    /* Sidebar: un registro d'inchiostro */
    --side-bg:color-mix(in oklch,var(--brand) 38%,#08101c);
    --side-bg-2:color-mix(in oklch,var(--brand) 26%,#050a12);
    --side-text:color-mix(in oklch,var(--brand) 10%,#e2e8f0);
    --side-muted:color-mix(in oklch,var(--brand) 22%,#94a1b5);
    --side-hover:rgb(255 255 255 / .055);
    --side-active:color-mix(in oklch,var(--brand) 78%,white 6%);
    --side-mark:color-mix(in oklch,var(--brand) 45%,white);
    --side-rule:color-mix(in oklch,var(--side-bg) 82%,white);
    --side-lines:rgb(255 255 255 / .028);

    /* --- Tipografia: scala 1.2 su base 14px, titoli fluidi ------------------- */
    --font:"Plex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --fs-xs:11.5px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:19px; --fs-2xl:23px;
    --fs-3xl:clamp(24px,1.6vw + 14px,30px);
    --fs-4xl:clamp(30px,2.6vw + 14px,44px);
    --lh:1.45;
    --condensed:85%;
    --track-tight:-.022em;

    /* --- Spazi: multipli di 4 ------------------------------------------------- */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

    /* --- Densità (la modalità compatta cambia solo questi) -------------------- */
    --row-y:11px;          /* righe di lista e tabelle */
    --ctl-h:34px;          /* bottoni e campi */
    --panel-x:var(--s5);

    /* --- Raggi: gerarchici, non uno per tutto --------------------------------- */
    --r-stamp:4px;   /* timbri, tag */
    --r-ctl:7px;     /* bottoni, campi */
    --r-card:12px;   /* pannelli */
    --r-sheet:16px;  /* dialoghi, drawer */

    /* --- Elevazione: ombre tinte d'inchiostro, solo per ciò che si stacca ---- */
    --tint-shadow:15 29 51;
    --e1:0 1px 0 rgb(var(--tint-shadow) / .035),0 1px 2px rgb(var(--tint-shadow) / .04);
    --e2:0 1px 2px rgb(var(--tint-shadow) / .06),0 4px 12px -2px rgb(var(--tint-shadow) / .08);
    --shadow-pop:0 2px 6px rgb(var(--tint-shadow) / .08),0 14px 34px -10px rgb(var(--tint-shadow) / .26);
    --shadow-sheet:0 4px 12px rgb(var(--tint-shadow) / .08),0 28px 64px -16px rgb(var(--tint-shadow) / .38);
    --highlight:inset 0 1px 0 rgb(255 255 255 / .7);
    --scrim:rgb(10 18 32 / .42);

    /* --- Movimento ------------------------------------------------------------ */
    --ease:cubic-bezier(.2,.7,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --spring:linear(0,.008 1.1%,.031 2.2%,.129 4.8%,.257 7.2%,.671 14.2%,.789 16.8%,.881 19.6%,.957 22.9%,1.006 26.3%,1.037 30.4%,1.048 35.4%,1.04 41%,1.006 55.5%,.997 63.5%,1);
    --t-fast:.12s; --t-med:.22s; --t-slow:.36s;

    /* --- Struttura ------------------------------------------------------------ */
    --side-w:240px;
    --top-h:64px;
  }

  /* Densità compatta: per chi passa la giornata sulle liste */
  :root[data-density="compact"]{
    --row-y:7px; --ctl-h:30px; --panel-x:var(--s4);
    --fs-md:13.5px;
  }

  /* Tema scuro: la carta diventa lavagna, l'inchiostro si accende */
  :root[data-theme="dark"]{
    color-scheme:dark;
    --sheet:#131d30;
    --bg:#0c1423; --surface:#131d30; --surface-2:#172338; --surface-sunk:#0f1828; --surface-raised:#1a2740;
    --text:#e6ebf3; --text-2:#c2cad7; --muted:#8e9ab0; --faint:#5d6a82;
    --line:#26334b; --line-soft:#1d2940; --line-strong:#33425f;
    --accent:color-mix(in oklch,var(--brand) 62%,white);
    --accent-strong:color-mix(in oklch,var(--brand) 45%,white);
    --accent-soft:color-mix(in oklch,var(--brand) 22%,#131d30);
    --accent-tint:color-mix(in oklch,var(--brand) 34%,#131d30);
    --on-accent:#0b1424;
    --danger:#ef7a70; --danger-soft:#3a1d22;
    --ok:#5cc3a6; --ok-soft:#14322c;
    --warn:#e3a54a; --warn-soft:#352813;
    --people:#ab92ec; --people-soft:#2a2245;
    --focus:color-mix(in oklch,var(--brand) 55%,white);
    --info:#86a8f2;
    --side-bg:color-mix(in oklch,var(--brand) 24%,#060b14); --side-bg-2:color-mix(in oklch,var(--brand) 16%,#03060c);
    --side-active:color-mix(in oklch,var(--brand) 60%,#0a111e);
    --side-rule:#1a2640;
    --tint-shadow:0 0 0;
    --e1:0 0 0 1px rgb(0 0 0 / .12);
    --e2:0 2px 10px rgb(0 0 0 / .35);
    --shadow-pop:0 2px 6px rgb(0 0 0 / .35),0 14px 34px -10px rgb(0 0 0 / .65);
    --shadow-sheet:0 28px 64px -16px rgb(0 0 0 / .75);
    --highlight:inset 0 1px 0 rgb(255 255 255 / .04);
    --scrim:rgb(2 6 14 / .6);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme]){
      color-scheme:dark;
      --sheet:#131d30;
      --bg:#0c1423; --surface:#131d30; --surface-2:#172338; --surface-sunk:#0f1828; --surface-raised:#1a2740;
      --text:#e6ebf3; --text-2:#c2cad7; --muted:#8e9ab0; --faint:#5d6a82;
      --line:#26334b; --line-soft:#1d2940; --line-strong:#33425f;
      --accent:color-mix(in oklch,var(--brand) 62%,white);
      --accent-strong:color-mix(in oklch,var(--brand) 45%,white);
      --accent-soft:color-mix(in oklch,var(--brand) 22%,#131d30);
      --accent-tint:color-mix(in oklch,var(--brand) 34%,#131d30);
      --on-accent:#0b1424;
      --danger:#ef7a70; --danger-soft:#3a1d22;
      --ok:#5cc3a6; --ok-soft:#14322c;
      --warn:#e3a54a; --warn-soft:#352813;
      --people:#ab92ec; --people-soft:#2a2245;
      --focus:color-mix(in oklch,var(--brand) 55%,white);
    --info:#86a8f2;
      --side-bg:color-mix(in oklch,var(--brand) 24%,#060b14); --side-bg-2:color-mix(in oklch,var(--brand) 16%,#03060c);
      --side-active:color-mix(in oklch,var(--brand) 60%,#0a111e);
      --side-rule:#1a2640;
      --tint-shadow:0 0 0;
      --e1:0 0 0 1px rgb(0 0 0 / .12);
      --e2:0 2px 10px rgb(0 0 0 / .35);
      --shadow-pop:0 2px 6px rgb(0 0 0 / .35),0 14px 34px -10px rgb(0 0 0 / .65);
      --shadow-sheet:0 28px 64px -16px rgb(0 0 0 / .75);
      --highlight:inset 0 1px 0 rgb(255 255 255 / .04);
      --scrim:rgb(2 6 14 / .6);
    }
  }

  /* Contrasto elevato: linee e testi secondari più decisi */
  @media (prefers-contrast:more){
    :root{
      --muted:var(--ink-700); --faint:var(--ink-500);
      --line:color-mix(in oklch,var(--ink-500) 55%,var(--sheet));
      --line-soft:color-mix(in oklch,var(--ink-500) 35%,var(--sheet));
    }
  }
}

@layer tokens{
  /* --- Varianti dell'aspetto dello studio (Impostazioni → Aspetto) ------------ */
  :root[data-radius="square"]{--r-stamp:2px;--r-ctl:4px;--r-card:6px;--r-sheet:8px}
  :root[data-radius="round"]{--r-stamp:6px;--r-ctl:10px;--r-card:18px;--r-sheet:22px}
  :root[data-font="large"]{--fs-xs:12.5px;--fs-sm:13.5px;--fs-md:15.5px;--fs-lg:17.5px;--fs-xl:21px;--fs-2xl:25px}
  :root[data-sidebar="light"]{
    --side-bg:var(--surface);--side-bg-2:color-mix(in oklch,var(--brand) 4%,var(--surface));
    --side-text:var(--text-2);--side-muted:var(--muted);--side-hover:color-mix(in oklch,var(--brand) 7%,transparent);
    --side-active:var(--brand);--side-rule:var(--line);--side-lines:transparent
  }
}