/* ============================================================
   Sublima 2026 — Design Tokens (DESIGN.md §1.1–1.5)
   Light = :root. Dark = [data-theme="dark"] (predisposto, NON attivato).
   Solo variabili: inerte finché non referenziato da .s2026.
   ============================================================ */

:root {
  /* Brand — SEED: le uniche 4 che un configuratore per-tenant dovrà scrivere.
     Tutto il resto della palette è derivato da queste. */
  --s2026-brand:        #8B1538;
  --s2026-brand-deep:   #6B1028;
  --s2026-brand-hover:  #A31B45;
  --s2026-accent:       #A52A2A;

  /* Brand — derivate dal SEED */
  --s2026-brand-tint:   #F7EDF0;   /* brand all'8% su bianco */
  --s2026-brand-fg:     #FFFFFF;   /* testo/icone su fondo brand */
  --s2026-brand-text:   #8B1538;   /* brand come colore-testo su superficie chiara */

  /* Ink (testo) */
  --s2026-ink:   #1F2227;
  --s2026-ink-2: #3F4651;
  --s2026-ink-3: #6B7280;
  --s2026-ink-4: #9AA1AC;

  /* Surfaces */
  --s2026-bg:        #F6F7F9;
  --s2026-bg-panel:  #FFFFFF;
  --s2026-bg-raised: #FAFAFC;
  --s2026-bg-input:  #FFFFFF;

  /* Righe tabella — i 4 livelli devono restare distinguibili tra loro:
     zebra è neutra, hover e selezione sono cromatici e a intensità crescente.
     Se due di questi collassano, una riga in hover sembra selezionata. */
  --s2026-bg-row:     #FAFAFC;   /* zebra (pari) */
  --s2026-bg-row-hover:#F4E6EA;  /* brand al 12% */
  --s2026-bg-row-sel: #EFDCE2;   /* brand al 18% */
  --s2026-thead-bg:   #F7EDF0;   /* brand all'8%: il più chiaro dei tre rosa */

  /* Borders */
  --s2026-rule:        #E4E6EB;
  --s2026-rule-2:      #EDEEF1;
  --s2026-rule-strong: #ced4da;   /* pantone gray-400: bordo box più marcato vs righe */

  /* Status — bg / fg / dot */
  --s2026-success:    #2E9C5A;
  --s2026-success-bg: #D3EDDA;
  --s2026-success-fg: #1F7A3A;

  --s2026-warning:    #E08A1C;
  --s2026-warning-bg: #FCE9C7;
  --s2026-warning-fg: #A05A00;

  --s2026-info:    #2A7ED1;
  --s2026-info-bg: #D2E6F8;
  --s2026-info-fg: #1656A3;

  --s2026-danger:    #CF3A32;
  --s2026-danger-bg: #FADAD6;
  --s2026-danger-fg: #A02620;

  --s2026-neutral:    #888888;
  --s2026-neutral-bg: #DFE1E4;
  --s2026-neutral-fg: #555555;

  --s2026-purple:    #7E3EB5;
  --s2026-purple-bg: #E4D3F1;
  --s2026-purple-fg: #5A2785;

  /* Tipografia — font di sistema esistente (NO Inter / NO CDN) */
  --s2026-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --s2026-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scala tipografica (px, UI gestionale densa) */
  --s2026-fs-micro: 10px;
  --s2026-fs-xs:    11px;
  --s2026-fs-sm:    12px;
  --s2026-fs-base:  13px;
  --s2026-fs-md:    14px;
  --s2026-fs-lg:    16px;
  --s2026-fs-xl:    18px;
  --s2026-fs-2xl:   22px;
  --s2026-fs-3xl:   28px;

  /* Radius */
  --s2026-radius-xs:   3px;
  --s2026-radius-sm:   4px;
  --s2026-radius:      5px;
  --s2026-radius-md:   6px;
  --s2026-radius-lg:   8px;
  --s2026-radius-xl:   10px;
  --s2026-radius-2xl:  12px;
  --s2026-radius-pill: 11px;

  /* Shadows — la scala densa sta entro 4px di blur; -raised è l'unica
     eccezione (card in rilievo dell'anteprima). */
  --s2026-shadow-flat:   0 1px 0 rgba(0,0,0,0.04);
  --s2026-shadow-card:   0 1px 2px rgba(0,0,0,0.06);
  --s2026-shadow-tab:    0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --s2026-shadow-raised: 0 2px 8px rgba(15,23,42,.06);

  /* Focus ring — brand al 12%. Un solo posto per tutti gli input a fuoco. */
  --s2026-focus-ring: 0 0 0 3px rgba(139,21,56,.12);

  /* Transizione standard */
  --s2026-transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

[data-theme="dark"] {
  /* SEED */
  --s2026-brand:        #C8344A;
  --s2026-brand-deep:   #9A1F32;
  --s2026-brand-hover:  #D44A60;
  --s2026-accent:       #CF6A5C;

  /* derivate dal SEED */
  --s2026-brand-tint:   #2A1418;
  --s2026-brand-fg:     #FFFFFF;
  --s2026-brand-text:   #E68BA0;   /* sul dark il brand pieno non regge come testo */

  --s2026-shadow-raised: none;     /* le ombre non si leggono su fondo scuro */
  --s2026-focus-ring: 0 0 0 3px rgba(200,52,74,.22);

  --s2026-ink:   #E3E7EE;
  --s2026-ink-2: #B6BCC9;
  --s2026-ink-3: #7B8392;
  --s2026-ink-4: #525A6B;

  --s2026-bg:        #1B1E24;
  --s2026-bg-panel:  #23272F;
  --s2026-bg-raised: #2B303A;
  --s2026-bg-input:  #1E222A;

  /* Righe tabella — stesso vincolo del light: i livelli non devono collassare. */
  --s2026-bg-row:      #262A33;   /* zebra (pari) */
  --s2026-bg-row-hover:#3A2830;
  --s2026-bg-row-sel:  #4A333C;   /* più chiaro dell'hover: senza questo delta i due collassano */
  --s2026-thead-bg:    #33262C;

  --s2026-rule:        #3C4250;
  --s2026-rule-2:      #313640;
  --s2026-rule-strong: #4A515F;

  --s2026-success-bg: #143A24; --s2026-success-fg: #7CE5A6;
  --s2026-warning-bg: #3A2A0C; --s2026-warning-fg: #F2C97F;
  --s2026-info-bg:    #133048; --s2026-info-fg:    #A6CCFF;
  --s2026-danger-bg:  #3E1A16; --s2026-danger-fg:  #FFA39B;
  --s2026-neutral-bg: #2B303B; --s2026-neutral-fg: #C7CCD5;
  --s2026-purple-bg:  #331E48; --s2026-purple-fg:  #D7B5F2;
}