/* Koda «Ember Bento» — design token. Caricato dopo i CSS storici: da qui in giù è il sistema.
   I colori base (--bg, --surface, --surface2, --text, --muted, --accent, --line, ...) arrivano da js/themes.js;
   qui stanno le scale, le profondità, le ombre, la tipografia e il movimento. data-mode=light|dark lo imposta applyTheme. */
:root{
  /* arancio Koda, scala 50–950 */
  --ember-50:#FFF6ED;--ember-100:#FFEAD3;--ember-200:#FFD1A6;--ember-300:#FFB06E;--ember-400:#FF9A4D;--ember-500:#FF8A2B;
  --ember-600:#E8620C;--ember-700:#C2410C;--ember-800:#9A3412;--ember-900:#7C2D12;--ember-950:#431407;
  /* semantici vividi (tinte, pillole, categorie) */
  --emerald:#10B981;--amber:#F59E0B;--royal:#3B82F6;--rose:#F472B6;--red:#F43F5E;--violet:#8B5CF6;

  /* 4 livelli di profondità */
  --s-base:var(--bg);
  --s-subtle:color-mix(in srgb,var(--surface2) 55%,var(--bg));
  --s-card:var(--surface);
  --s-float:var(--surface2);
  --hair:color-mix(in srgb,var(--text) 9%,transparent);          /* bordo sottile */
  --spec:rgba(255,255,255,.75);                                    /* riflesso sul bordo alto */
  --shade:26 23 20;                                                /* rgb della dominante per le ombre */

  /* ombre doppie tinte: contatto + diffusione */
  --sh-1:0 1px 2px rgb(var(--shade) / .06),0 2px 8px -2px rgb(var(--shade) / .06);
  --sh-2:0 1px 2px rgb(var(--shade) / .05),0 12px 32px -12px rgb(var(--shade) / .16);
  --sh-3:0 2px 6px rgb(var(--shade) / .08),0 24px 60px -18px rgb(var(--shade) / .28);
  --sh-cta:0 1px 1px rgb(var(--shade) / .12),0 8px 22px -8px color-mix(in srgb,var(--accent) 65%,transparent);

  /* raggi e spazi (multipli di 4) */
  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --gap:var(--sp-4);--r:var(--r-lg);--r-s:var(--r-sm);

  /* tipografia */
  --t-display:600 clamp(48px,13vw,64px)/1 var(--f-disp);
  --t-title:600 22px/1.2 var(--f-disp);
  --t-h2:600 17px/1.25 var(--f-disp);
  --t-meta:500 13px/1.35 var(--f-body);
  --t-num:600 32px/1 var(--f-disp);
  --track-tight:-.02em;

  /* movimento */
  --ease-out:cubic-bezier(.22,1,.36,1);              /* easeOutQuint */
  --spring:linear(0,.25 7%,.72 17%,.97 27%,1.06 35%,1.04 45%,1 60%,.995 80%,1);
  --d-fast:200ms;--d-base:280ms;--d-slow:520ms;--stagger:30ms;

  /* testo delle pillole semantiche: tono scuro su chiaro */
  --on-emerald:#047857;--on-amber:#92400E;--on-royal:#1D4ED8;--on-rose:#BE185D;--on-red:#BE123C;--on-violet:#6D28D9;--on-ember:#C2410C;
}
:root[data-mode=dark]{
  --s-subtle:color-mix(in srgb,var(--surface) 45%,var(--bg));
  --hair:rgba(255,255,255,.07);
  --spec:rgba(255,255,255,.09);
  --shade:0 0 0;
  --sh-1:0 1px 2px rgb(0 0 0 / .4);
  --sh-2:0 1px 2px rgb(0 0 0 / .35),0 16px 40px -16px rgb(0 0 0 / .7);
  --sh-3:0 2px 8px rgb(0 0 0 / .45),0 30px 70px -20px rgb(0 0 0 / .8);
  --emerald:#34D399;--amber:#FBBF24;--royal:#60A5FA;--rose:#F9A8D4;--red:#FB7185;--violet:#A78BFA;
  --on-emerald:#6EE7B7;--on-amber:#FCD34D;--on-royal:#93C5FD;--on-rose:#F9A8D4;--on-red:#FDA4AF;--on-violet:#C4B5FD;--on-ember:#FFB06E;
}