/**
 * Impronta — Design Tokens
 * Unica fonte di verità per tutti i valori di design.
 * Refactoring Giugno 2026 — caricamento unico, tema globale.
 *
 * STRUTTURA:
 *   1. Token strutturali (spacing, radius, z-index, transition, font-scale)
 *   2. Colori-tema (dark default)
 *   3. Alias di compatibilità (nomi storici di app.css → valori nuovi)
 *   4. Colori sistema HD — INTOCCABILI
 *   5. Light mode ([data-theme="light"])
 *
 * I colori HD non cambiano mai. Gli alias permettono alle pagine non ancora
 * rifatte (che usano i nomi storici) di adottare il tema nuovo senza rotture.
 */

/* ============================================================
   1+2. ROOT — token strutturali + colori-tema (dark default)
   ============================================================ */
:root {

  /* ── Background scale ── */
  --bg:    #16140F;
  --bg2:   #1C1A15;
  --bg3:   #24211B;
  --card:  #1F1C16;
  --card2: #28241D;

  --bg-grad:    var(--bg);
  --card-grad:  var(--card);
  --card2-grad: var(--card2);

  /* ── Border / line ── */
  --ln:    rgba(237, 228, 204, .08);
  --ln2:   rgba(237, 228, 204, .15);
  --ln3:   rgba(237, 228, 204, .24);

  /* ── Ink (testo) ── */
  --ink:   #D8D2C2;
  --ink80: rgba(216, 208, 194, .86);
  --ink70: rgba(216, 208, 194, .76);
  --ink60: rgba(216, 208, 194, .68);
  --ink55: rgba(216, 208, 194, .64);
  --ink50: rgba(216, 208, 194, .56);
  --ink40: rgba(216, 208, 194, .48);
  --ink30: rgba(216, 208, 194, .38);
  --ink20: rgba(216, 208, 194, .26);
  --ink10: rgba(216, 208, 194, .12);
  --ink06: rgba(216, 208, 194, .07);

  /* ── Accento principale (oro sabbia) ── */
  --gold:     #D4B068;
  --gold-dim: #A88840;
  --gold-bg:  rgba(212, 176, 104, .09);
  --gold-ln:  rgba(212, 176, 104, .22);
  --gold-rgb: 212, 176, 104;

  /* ── Accenti semantici ── */
  --sage:      #5E9468;
  --sage-bg:   rgba(94, 148, 104, .10);
  --sage-ln:   rgba(94, 148, 104, .25);

  --terra:     #BA6040;
  --terra-bg:  rgba(186, 96, 64, .10);
  --terra-ln:  rgba(186, 96, 64, .25);

  --violet:    #9878C8;
  --violet-bg: rgba(152, 120, 200, .10);
  --violet-ln: rgba(152, 120, 200, .25);

  /* ── Tipografia ── */
  --font:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', 'Menlo', monospace;
  --sacred:  'Cormorant Garamond', Georgia, serif;
  --mod-h:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* ── Font scale ── */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   15px;
  --fs-h3:   15px;
  --fs-h2:   20px;
  --fs-h1:   28px;
  --fs-hero: 38px;

  /* ── Font weight ── */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* ── Line height ── */
  --lh-tight:  1.2;
  --lh-snug:   1.45;
  --lh-base:   1.65;
  --lh-loose:  1.85;

  /* ── Border radius ── */
  --r:     8px;
  --rM:    10px;
  --rL:    14px;
  --rXL:   20px;
  --rFull: 9999px;

  /* ── Spacing scale ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Layout ── */
  --sidebar-w:   192px;
  --topbar-h:     44px;
  --bottombar-h:  60px;

  /* ── Z-index scale ── */
  --z-base:      1;
  --z-sticky:   10;
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-top:     9999;

  /* ── Transition ── */
  --t-fast:  .12s ease;
  --t-base:  .20s ease;
  --t-slow:  .35s ease;

  /* ==========================================================
     3. ALIAS DI COMPATIBILITÀ
     Nomi storici usati da app.css / app-responsive.css e dai
     CSS legacy (community, aura, reading, profile-themes...).
     Mappati ai valori del tema nuovo per coerenza visiva.
     ========================================================== */
  --border:        var(--ln2);
  --glow:          rgba(212, 176, 104, .15);
  --cream:         #EDE8DC;
  --olive:         #8A9A4E;
  --accent-violet: var(--violet);
  --rx-accent:     var(--gold);
  --mbg-glow:      rgba(212, 176, 104, .12);

  --heading:  'Inter', system-ui, sans-serif;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --body:     'Inter', system-ui, sans-serif;

  --surface2: var(--bg2);
  --surface3: var(--bg3);
  --surface:  var(--card);
  --border-soft: var(--ln);

  --ink05: rgba(237, 232, 220, .05);
  --ink08: rgba(237, 232, 220, .08);
  --ink15: rgba(237, 232, 220, .15);
  --ink25: rgba(237, 232, 220, .25);
  --ink35: rgba(237, 232, 220, .35);
  --ink45: rgba(237, 232, 220, .45);
}

/* ============================================================
   4. COLORI SISTEMA HD — INTOCCABILI
   ============================================================ */
:root {
  --hd-p:  #E8DFC8;
  --hd-d:  #A85C38;
  --hd-b:  #B5903A;
  --hd-h:  #7A6A90;

  --hd-generator:             #5A8060;
  --hd-manifesting_generator: #8A9A4E;
  --hd-projector:             #B5903A;
  --hd-manifestor:            #A85C38;
  --hd-reflector:             #7A6A90;

  --hd-ch-p:  rgba(232, 223, 200, .55);
  --hd-ch-d:  rgba(168,  92,  56, .60);
  --hd-ch-b:  rgba(181, 144,  58, .70);
  --hd-ch-h:  rgba(120,  88, 184, .65);

  --hd-center-def-fill:    rgba(90, 128, 96, .10);
  --hd-center-def-stroke:  rgba(90, 128, 96, .40);
}

/* ============================================================
   5. LIGHT MODE — Avorio premium
   Palette: caldo avorio senza rosato, card off-white warm,
   sistema a ombra (non solo bordi), tipografia leggermente
   aperta. La firma visiva è il serif (--sacred) sui titoli h1.
   ============================================================ */
[data-theme="light"] {

  /* ── Background — avorio caldo, zero rosato (G > R, B basso) ── */
  --bg:    #E9E5D7;
  --bg2:   #DEDAD1;
  --bg3:   #D3CFC0;
  --card:  #F3F0E7;
  --card2: #EAE7DC;

  /* Gradients: luce da sinistra in alto, sempre tonalità avorio ── */
  --bg-grad:    radial-gradient(140% 120% at 20% 0%, #EDEADA, #E0DCCE);
  --card-grad:  linear-gradient(165deg, #F6F4EB, #EDEADE);
  --card2-grad: linear-gradient(165deg, #EDEADE, #E4E1D6);

  /* ── Border — caldo (8 = very warm near-black base) ── */
  --ln:    rgba(28, 22, 8, .09);
  --ln2:   rgba(28, 22, 8, .15);
  --ln3:   rgba(28, 22, 8, .24);

  /* ── Ink — near-black caldo (non grigio) ── */
  --ink:   #1C1912;
  --ink80: rgba(28, 25, 18, .88);
  --ink70: rgba(28, 25, 18, .80);
  --ink60: rgba(28, 25, 18, .70);
  --ink55: rgba(28, 25, 18, .64);
  --ink50: rgba(28, 25, 18, .57);
  --ink40: rgba(28, 25, 18, .48);
  --ink30: rgba(28, 25, 18, .38);
  --ink20: rgba(28, 25, 18, .27);
  --ink10: rgba(28, 25, 18, .14);
  --ink06: rgba(28, 25, 18, .07);

  /* ── Gold — più profondo per WCAG AA su bg chiaro ── */
  --gold:     #8A5A0C;
  --gold-dim: #6C4408;
  --gold-bg:  rgba(138, 90, 12, .09);
  --gold-ln:  rgba(138, 90, 12, .24);
  --gold-rgb: 138, 90, 12;

  /* ── Accenti semantici — adattati per leggibilità su chiaro ── */
  --sage:      #3A6E44;
  --sage-bg:   rgba(58, 110, 68, .09);
  --sage-ln:   rgba(58, 110, 68, .25);

  --terra:     #9E3C1E;
  --terra-bg:  rgba(158, 60, 30, .09);
  --terra-ln:  rgba(158, 60, 30, .25);

  --violet:    #674AA8;
  --violet-bg: rgba(103, 74, 168, .09);
  --violet-ln: rgba(103, 74, 168, .25);

  /* ── Shadow system — profondità reale senza bordi pesanti ──
     In dark mode queste variabili non vengono usate (non definite
     nel :root globale). In light sostituiscono i bordi opachi. ── */
  --shadow-sm: 0 1px 2px rgba(28, 22, 8, .06), 0 3px 10px -3px rgba(28, 22, 8, .09);
  --shadow-md: 0 2px 4px rgba(28, 22, 8, .06), 0 8px 22px -8px rgba(28, 22, 8, .13);
  --shadow-lg: 0 4px 8px rgba(28, 22, 8, .07), 0 16px 40px -12px rgba(28, 22, 8, .16);

  /* ── Tipografia — scala leggermente aperta, respiro premium ── */
  --fs-base: 13.5px;
  --fs-md:   15.5px;
  --lh-base: 1.68;
  --lh-snug: 1.50;

  /* ── Alias compatibilità legacy ── */
  --border:      var(--ln2);
  --glow:        rgba(138, 90, 12, .12);
  --cream:       #1C1912;
  --olive:       #5F6E22;
  --surface:     var(--card);
  --surface2:    var(--bg2);
  --surface3:    var(--bg3);
  --border-soft: var(--ln);

  --ink05: rgba(28, 22, 8, .06);
  --ink08: rgba(28, 22, 8, .09);
  --ink15: rgba(28, 22, 8, .16);
  --ink25: rgba(28, 22, 8, .28);
  --ink35: rgba(28, 22, 8, .40);
  --ink45: rgba(28, 22, 8, .52);
}

/* ============================================================
   6. BODYGRAPH / MANDALA — pannello scuro caldo in LIGHT
   L'SVG del bodygraph e del mandala usano colori cream chiari
   nei loro stili interni (intoccabili): su sfondo chiaro
   sparirebbero. In light diamo ai contenitori grafici un
   pannello scuro caldo "in tono" (marrone, non nero), così
   i grafici restano leggibili e premium.
   ============================================================ */

/* Bodygraph singolo e mandala singolo: pannello scuro caldo medio.
   I tracciati cream nativi dell'SVG si vedono già su questo fondo,
   quindi NON li tocchiamo: restano sottili e trasparenti come nel dark. */
[data-theme="light"] .chart-view-bg .bg-wrap,
[data-theme="light"] .chart-view-mandala .mandala-wrap,
[data-theme="light"] .combo-viewport,
[data-theme="light"] .mini-bg-wrap,
[data-theme="light"] .prof-bodygraph-mini {
  background: #E5E0D6;
  border: 1px solid rgba(28, 22, 8, .10);
}
[data-theme="light"] .mini-bg-wrap {
  border-radius: var(--rL);
  padding: 8px;
}

/* Tool zoom: niente riquadro invasivo, solo i bottoni discreti */
[data-theme="light"] .zoom-overlay,
[data-theme="light"] .mandala-zoom {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}
[data-theme="light"] .zoom-ob { color: rgba(245, 240, 230, .70); }
[data-theme="light"] .zoom-ob:hover { color: var(--gold); background: rgba(43, 40, 32, .25); }
[data-theme="light"] .zoom-ol { color: rgba(245, 240, 230, .60); }

/* ============================================================
   7. CARD PREMIUM in LIGHT — shadow system per profondità reale
   Le card "flottano" sull'avorio grazie alle ombre, non ai bordi.
   Il bordo resta sottile come firma, l'ombra dà la profondità.
   ============================================================ */
[data-theme="light"] .card,
[data-theme="light"] .conn-card,
[data-theme="light"] .aura-card,
[data-theme="light"] .aura-box,
[data-theme="light"] .archive-card,
[data-theme="light"] .archive-resonance-card,
[data-theme="light"] .learn-card,
[data-theme="light"] .home-feature-card,
[data-theme="light"] .plan-card,
[data-theme="light"] .ns-card,
[data-theme="light"] .notif-box,
[data-theme="light"] .lk-card,
[data-theme="light"] .ar-card,
[data-theme="light"] .bgg-card,
[data-theme="light"] .rz-item,
[data-theme="light"] .dash-sky-card,
[data-theme="light"] .dash-channels-card,
[data-theme="light"] .dash-planet-card,
[data-theme="light"] .dash-design-card,
[data-theme="light"] .dash-yoga-card,
[data-theme="light"] .yoga-stat-card,
[data-theme="light"] .yoga-program-card,
[data-theme="light"] .ib-block,
[data-theme="light"] .ts-block,
[data-theme="light"] .rdg-block,
[data-theme="light"] .rdg-channel,
[data-theme="light"] .rdg-var,
[data-theme="light"] .rdg-stat-card,
[data-theme="light"] .rdg-panel__card,
[data-theme="light"] .rb-card,
[data-theme="light"] .rdg-auth-block,
[data-theme="light"] .rdg-lock-card,
[data-theme="light"] .rdg-narrative {
  background: var(--card-grad) !important;
  border: 0.5px solid rgba(28, 22, 8, .13) !important;
  box-shadow: var(--shadow-md);
}

/* Hover: bordo gold + shadow più presente */
[data-theme="light"] .card:hover,
[data-theme="light"] .conn-card:hover,
[data-theme="light"] .archive-card:hover,
[data-theme="light"] .learn-card:hover,
[data-theme="light"] .home-feature-card:hover,
[data-theme="light"] .rz-item:hover {
  border-color: var(--gold-ln) !important;
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   8. BLOCCHI INTERNI in LIGHT — da grigio (--ink05) a crema in tono
   I sotto-blocchi dentro le card (canali, spettri, azioni, ecc.)
   usavano background var(--ink05): su pagina chiara appaiono grigi.
   In light li portiamo a un crema caldo coerente.
   ============================================================ */
[data-theme="light"] .rb-channel,
[data-theme="light"] .rb-acc,
[data-theme="light"] .rdg-channel,
[data-theme="light"] .rdg-channel-detail,
[data-theme="light"] .rdg-narrative__sub,
[data-theme="light"] .rdg-spectrum,
[data-theme="light"] .rdg-action,
[data-theme="light"] .rdg-auth-block,
[data-theme="light"] .rdg-var,
[data-theme="light"] .rdg-planet-table,
[data-theme="light"] .rdg-stat-card {
  background: var(--card2-grad) !important;
}

/* ============================================================
   9. TEXTURE RUMORE — spenta in light (disturba su pagina chiara)
   ============================================================ */
[data-theme="light"] .reading-page::before {
  opacity: 0;
}