:root {
  color-scheme: dark;

  /* ═══════════════════════════════════════════════════════════════
     ARDESIA — tema scuro, default di Semina
     «Il giardino mediterraneo»: Lavanda resta accento, Grano/Mare/Ulivo
     domini, Terracotta/Mattone semantici. Metodo oklch/P3, calore in
     luce+accenti, fondali neutri. Il pavimento è carbone #171717.
     Neve «all'alba» vive nel blocco :root[data-theme="light"].
     Scale derivate da anchor oklch — docs/mockups/palette-giardino-mediterraneo-v1.html
     ═══════════════════════════════════════════════════════════════ */

  /* ═══ LAYER 1 — SCALE DI RIFERIMENTO (hex sRGB fallback) ═══
     Hue fisso per famiglia, lightness condivisa, chroma a campana.
     L'override @supports(color:oklch(0 0 0)) in fondo aggiunge oklch/P3.
     NON usare direttamente nei componenti: passare dai ruoli Layer 2. */
  --grano-100:#f7e5c9; --grano-200:#f0cf9a; --grano-300:#e6b560;
  --grano-400:#db9c0e; --grano-500:#c08800; --grano-600:#a37300;
  --grano-700:#865e00; --grano-800:#694900; --grano-900:#4e3500;

  --mare-100:#d3edf4; --mare-200:#aedeea; --mare-300:#81cbde;
  --mare-400:#51b9d1; --mare-500:#13a5c0; --mare-600:#008ca4;
  --mare-700:#007387; --mare-800:#005a6a; --mare-900:#00424f;

  --ulivo-100:#e0edd6; --ulivo-200:#c7ddb3; --ulivo-300:#aaca8c;
  --ulivo-400:#8fb866; --ulivo-500:#77a445; --ulivo-600:#628c32;
  --ulivo-700:#4f7324; --ulivo-800:#3d5a1a; --ulivo-900:#2c4212;

  --lavanda-100:#e2e6ff; --lavanda-200:#c9d1ff; --lavanda-300:#adb8ff;
  --lavanda-400:#94a0ff; --lavanda-500:#7b84ff; --lavanda-600:#6363fe;
  --lavanda-700:#4f47e2; --lavanda-800:#3d36b5; --lavanda-900:#2c2887;

  --terracotta-100:#ffe0d6; --terracotta-200:#ffc5b2; --terracotta-300:#fda487;
  --terracotta-400:#f58662; --terracotta-500:#e26b45; --terracotta-600:#c65630;
  --terracotta-700:#a64321; --terracotta-800:#833318; --terracotta-900:#622510;

  --mattone-100:#ffdfdc; --mattone-200:#ffc3be; --mattone-300:#ffa099;
  --mattone-400:#fa7f79; --mattone-500:#ec5f5c; --mattone-600:#d14646;
  --mattone-700:#b03334; --mattone-800:#8b2627; --mattone-900:#681b1b;

  /* ═══ BACKGROUND SCALE ═══ */
  --bg-page:      #171717;
  --bg-input:     #131313;
  --bg-surface:   #1f1f1f;
  --bg-elevated:  #262626;
  --bg-overlay:   rgba(0,0,0,0.65);

  /* ═══ TEXT SCALE ═══ */
  --text-heading:   #f5f5f5;
  --text-primary:   #d4d4d4;
  --text-secondary: #a3a3a3;
  --text-tertiary:  #8a8a8a;
  --text-disabled:  #5a5a5a;

  /* ═══ BORDER SCALE ═══ */
  --border-subtle:  #262626;
  --border-default: #333333;
  --border-strong:  #525252;

  /* ═══ LAYER 2 — ACCENT (Lavanda) ═══ */
  --accent:        var(--lavanda-600);
  --accent-rgb:    99, 99, 254;
  --accent-hover:  var(--lavanda-500);
  --accent-light:  var(--lavanda-300);
  --accent-muted:  rgba(var(--accent-rgb), 0.12);
  --accent-subtle: rgba(var(--accent-rgb), 0.08);
  --on-accent:     #fff;

  --gradient-cta:  linear-gradient(135deg, var(--lavanda-700), var(--lavanda-800));
  --gradient-word: linear-gradient(120deg, var(--grano-200), var(--grano-400));

  /* ═══ LAYER 2 — SEMANTIC (giardino mediterraneo) ═══ */
  --success: var(--ulivo-500);
  --warning: var(--terracotta-400);
  --error:   var(--mattone-400);
  --info:    var(--mare-400);

  --success-tint: color-mix(in srgb, var(--success) 15%, var(--bg-surface));
  --warning-tint: color-mix(in srgb, var(--warning) 15%, var(--bg-surface));
  --error-tint:   color-mix(in srgb, var(--error)   15%, var(--bg-surface));
  --info-tint:    color-mix(in srgb, var(--info)    15%, var(--bg-surface));

  /* ═══ LAYER 2 — DOMAIN (colori di bucket) ═══ */
  --c-income:  var(--grano-400);
  --c-savings: var(--ulivo-400);
  --c-inv:     var(--mare-500);
  --c-guilt:   var(--lavanda-400);
  --c-tax:     var(--terracotta-500);
  --c-fixed:   #64748b;
  --c-unknown: #374151;

  /* ═══ LAYER 3 — DERIVAZIONI ═══ */
  --gradient-harvest: linear-gradient(135deg, var(--grano-200), var(--grano-400));
  --gradient-hero:    linear-gradient(120deg, var(--grano-200), var(--grano-400));
  --gradient-ambient: radial-gradient(ellipse 620px 260px at 18% 0%, color-mix(in srgb, var(--lavanda-500) 9%, transparent), transparent 70%),
                      radial-gradient(ellipse 540px 200px at 85% 100%, color-mix(in srgb, var(--grano-400) 5%, transparent), transparent 70%);
  --done-veil:        color-mix(in srgb, var(--grano-400) 10%, transparent);

  /* ═══ SCENA METEO (Piano di Spesa) ═══
     Palette della scena D1 «Il cielo sul mare»: il sole (=entrate) è fermo,
     è il cielo che cambia col piano. Ricette derivate da mare/grano su bg-input
     per Ardesia: il ciano-blu del Mare legge «giorno» in dark (il viola di
     Lavanda invece leggerebbe «crepuscolo»), lo stop caldo grano-300 all'orizzonte
     simula atmospheric scattering. Consumatore unico dichiarato: .pse-hero-meteo.
     Se un secondo componente li chiede (candidato: widget meteo Panoramica),
     ridiscutere lo scope. */
  --met-sky-hi:   color-mix(in srgb, var(--mare-800) 58%, var(--bg-input));
  --met-sky-lo:   color-mix(in srgb, var(--mare-600) 42%, var(--bg-input));
  --met-sky-haze: color-mix(in srgb, var(--grano-300) 18%, var(--met-sky-lo));
  --met-sun:      var(--grano-300);
  --met-sun-edge: var(--grano-400);
  --met-sea-hi:   color-mix(in srgb, var(--mare-700) 48%, var(--bg-input));
  --met-sea-lo:   color-mix(in srgb, var(--mare-900) 55%, var(--bg-input));
  --met-wave:     color-mix(in srgb, var(--mare-300) 30%, transparent);
  --met-cloud:    color-mix(in srgb, var(--border-strong) 92%, var(--bg-surface));
  --met-rain:     var(--text-disabled);
  --met-scrim:    color-mix(in srgb, var(--bg-page) 92%, transparent);

  /* ═══ TYPOGRAPHY ═══ */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  /* Serif editoriale: titoli e tagline della porta d'ingresso («la vita che
     desideri», «Scegli la tua luce»). Voce calda, da quaderno, non da UI. */
  --font-serif: ui-serif, Georgia, 'Times New Roman', serif;

  /* Type scale (manuale, ottimizzata per UI densa — non una scala a ratio fisso) */
  --text-2xs:  0.625rem;    /* 10px */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.75rem;     /* 12px */
  --text-base: 0.8125rem;   /* 13px */
  --text-md:   0.875rem;    /* 14px */
  --text-lg:   1rem;        /* 16px */
  --text-xl:   1.125rem;    /* 18px */
  --text-2xl:  1.375rem;    /* 22px */
  --text-3xl:  1.5rem;      /* 24px */
  --text-4xl:  1.75rem;     /* 28px */
  --text-hero:    3rem;     /* 48px */
  --text-display: 4.75rem;  /* 76px — display protagonista del .ds-input-sheet.
                               Consumatore unico dichiarato: se un secondo
                               componente lo chiede, ridiscutere la scala. */

  /* Font weights */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Line heights */
  --leading-tight:   1.2;   /* titoli, valori KPI */
  --leading-normal:  1.5;   /* testo UI */
  --leading-relaxed: 1.6;   /* testi lunghi, descrizioni */

  /* ═══ SPACING (base 2px: --space-N = N × 2px) ═══ */
  --space-1:  0.125rem;  /* 2px  */
  --space-2:  0.25rem;   /* 4px  */
  --space-3:  0.375rem;  /* 6px  */
  --space-4:  0.5rem;    /* 8px  */
  --space-5:  0.625rem;  /* 10px */
  --space-6:  0.75rem;   /* 12px */
  --space-8:  1rem;      /* 16px */
  --space-10: 1.25rem;   /* 20px */
  --space-12: 1.5rem;    /* 24px */
  --space-16: 2rem;      /* 32px */
  --space-20: 2.5rem;    /* 40px */
  --space-24: 3rem;      /* 48px */

  /* ═══ BORDER RADIUS ═══ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  /* ═══ SHADOWS ═══ */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.6);

  --shadow-glow-sm:    0 0 0 2px rgba(var(--accent-rgb), 0.1);
  --shadow-glow-md:    0 0 0 3px rgba(var(--accent-rgb), 0.15);
  --shadow-glow-lg:    0 0 20px rgba(var(--accent-rgb), 0.12);
  --shadow-glow-error: 0 0 0 3px rgba(250,127,121,0.15);  /* --error mattone-400 */

  /* ═══ MOTION ═══ */
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-entrance: 500ms;

  /* Ambient loops (spinner, skeleton, caret) */
  --duration-spin:  800ms;
  --duration-pulse: 1500ms;
  --duration-blink: 1s;

  /* ═══ Z-INDEX ═══ */
  --z-sidebar:     200;
  --z-sticky:      300;
  --z-bottom-nav:  400;
  --z-modal:       600;
  --z-modal-above: 700;
  --z-overlay:     800;
  --z-popover:     900;
  --z-toast:       999;
  --z-auth:        1000;

  /* ═══ COMPONENT: TOGGLE ═══ */
  --toggle-track-off: #6b7280;  /* 3.66:1 su surface, 3.45:1 su elevated (WCAG non-text ≥3:1) */
  --toggle-thumb:     #fff;

  /* ═══ COMPONENT: PROGRESS (con direzione semantica) ═══ */
  /* Barre e anelli condividono il pattern: il colore del fill dipende dal *verso*
     della progressione, non dal bucket a cui appartiene. Il colore del bucket
     vive solo nel dot 8px accanto al nome.
     - Accumulo (verso obiettivo): neutro sotto, --success a pieno
     - Spesa (verso soglia):       neutro sotto, --warning ≥90%, --error >105%
     Le soglie (90/105) sono comportamento del consumatore, non token. */
  --progress-track:        var(--border-subtle);
  --progress-fill-neutral: rgba(187, 189, 195, 0.55);  /* --text-primary @ 55% */

  /* Tacca temporale — segna la % di mese trascorso sulle barre di spesa */
  --tick-width: 2px;
  --tick-color: var(--text-disabled);

  /* Anello di progresso — SVG con stroke-dasharray */
  --ring-size:   56px;
  --ring-stroke: 5px;

  /* ═══ COMPONENT: QUOTA STRIP ═══ */
  /* Editing progressivo a quote da 5 punti. Ogni pillola è un bersaglio;
     toccarne una alloca fino al suo valore. Strisce di lunghezza diversa
     comunicano un massimo intenzionale (es. da parte max 40% = 8 quote). */
  --quota-w:    13px;
  --quota-h:    16px;
  --quota-gap:  3px;
  --quota-off:  var(--border-subtle);
  --quota-on:   rgba(232, 234, 240, 0.6);

  /* ═══ COMPONENT: STEP HEADER ═══ */
  /* Header di fase numerata (es. Piano di spesa 1·Accumula 2·Paga 3·Goditi).
     Numero cerchiato accent + titolo pieno + eventuale riepilogo a destra. */
  --step-num-size: 22px;
  --step-num-bg:   var(--accent-muted);
  --step-num-fg:   var(--accent-light);

  /* ═══ COMPONENT: WARNING INLINE ═══ */
  /* Warning ancorato alla card che riguarda (scala avvisi, livello 2).
     Il testo è --warning; la card interessata prende un bordo tint per
     farsi trovare senza gridare. */
  --warn-border-tint: color-mix(in srgb, var(--warning) 30%, transparent);

  /* ═══ COMPONENT: NAV SECTION LABEL ═══ */
  /* Label di gruppo nella sidebar (es. "Ogni mese", "Nel tempo").
     Deve sussurrare, non competere con le voci di menù. */
  --nav-section-label-size:     var(--text-2xs);        /* 10px */
  --nav-section-label-weight:   var(--weight-semibold); /* 600 */
  --nav-section-label-color:    var(--text-tertiary);
  --nav-section-label-tracking: 0.12em;
  --nav-section-label-pad-x:    var(--space-6);         /* 12px, allineato a nav-item */
  --nav-section-label-pad-y:    var(--space-3);         /* 6px */
  --nav-section-label-gap-top:  var(--space-8);         /* 16px sopra il gruppo successivo */

  /* ═══ COMPONENT: SIDEBAR ═══ */
  /* Larghezze della colonna di navigazione + maniglia di collasso.
     La maniglia è un cerchio a cavallo del bordo destro (pattern
     Notion/Linear): affordance visibile in entrambi gli stati. */
  --sidebar-w:           220px;
  --sidebar-w-collapsed: 48px;
  --sidebar-handle-size: 24px;

  /* ═══ OPACITY ═══ */
  --opacity-disabled: 0.4;
  --opacity-muted:    0.6;
  --opacity-overlay:  0.55;

  /* ═══ BACKWARD-COMPAT ALIASES ═══
     Mapped to new tokens so existing code doesn't break.
     Remove these as components migrate to new names. */
  --bg:         var(--bg-page);
  --surface:    var(--bg-surface);
  --surface-alt: var(--bg-input);  /* stat tiles inset (.inv-stat, .rf-card) */
  --border:     var(--border-subtle);
  --border-mid: var(--border-strong);
  --text:       var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-dim:   var(--text-tertiary);
  --text-xdim:  var(--text-disabled);
  --purple:     var(--accent);
  --purple-h:   var(--accent-hover);
  --purple-l:   var(--accent-light);
  --green:      var(--success);
  --yellow:     var(--warning);
  --red:        var(--error);
  --blue-l:     var(--info);
  --font:       var(--font-sans);
  --font-num:   'tabular-nums';
  --r-sm:       var(--radius-sm);
  --r-md:       var(--radius-md);
  --r-lg:       var(--radius-lg);
  --gap:        var(--space-6);
  --gap-lg:     var(--space-12);
}

/* ═══════════════════════════════════════════════════════════════
   NEVE ALL'ALBA — tema chiaro
   Pagina bianco-caldo #fbf9f5, card bianco puro, calore sussurrato.
   Semantici e domini virano step per reggere su superfici chiare.
   ═══════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  color-scheme: light;

  /* ═══ BACKGROUND SCALE — neve all'alba ═══ */
  --bg-page:      #fbf9f5;
  --bg-input:     #f7f3ee;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f6f2ec;
  --bg-overlay:   rgba(0,0,0,0.4);

  /* ═══ TEXT SCALE ═══ */
  --text-heading:   #171717;
  --text-primary:   #262626;
  --text-secondary: #525252;
  --text-tertiary:  #737373;
  --text-disabled:  #a3a3a3;

  /* ═══ BORDER SCALE — calde ═══ */
  --border-subtle:  #efece8;
  --border-default: #e7e4df;
  --border-strong:  #a3a3a3;

  /* ═══ ACCENT (Lavanda) ═══ */
  --accent:        var(--lavanda-700);
  --accent-rgb:    79, 71, 226;
  --accent-hover:  var(--lavanda-800);
  --accent-light:  var(--lavanda-800);
  --on-accent:     #fff;

  --gradient-cta:  linear-gradient(135deg, var(--lavanda-700), var(--lavanda-800));
  --gradient-word: linear-gradient(120deg, var(--grano-600), var(--grano-800));

  /* ═══ SEMANTIC ═══ */
  --success: var(--ulivo-700);
  --warning: var(--terracotta-700);
  --error:   var(--mattone-700);
  --info:    var(--mare-700);

  /* ═══ DOMAIN ═══ */
  --c-income:  var(--grano-700);
  --c-savings: var(--ulivo-600);
  --c-inv:     var(--mare-600);
  --c-guilt:   var(--lavanda-500);
  --c-tax:     var(--terracotta-600);

  /* ═══ DERIVAZIONI ═══ */
  --gradient-harvest: linear-gradient(135deg, var(--grano-600), var(--grano-800));
  --gradient-hero:    linear-gradient(120deg, var(--grano-600), var(--grano-800));
  --gradient-ambient: radial-gradient(ellipse 620px 260px at 18% 0%, color-mix(in srgb, var(--lavanda-600) 6%, transparent), transparent 70%),
                      radial-gradient(ellipse 540px 200px at 85% 100%, color-mix(in srgb, var(--grano-500) 4%, transparent), transparent 70%);

  /* ═══ SCENA METEO — variante Neve ═══
     In Neve la scena si tara su bg-surface (bianco caldo) invece che bg-input,
     scale mare/grano scendono di step (200/100 per il cielo, 300/500 per il mare,
     500/600 per il sole) per reggere su fondo chiaro senza saturare. */
  --met-sky-hi:   color-mix(in srgb, var(--mare-400) 88%, var(--bg-surface));
  --met-sky-lo:   color-mix(in srgb, var(--mare-300) 85%, var(--bg-surface));
  --met-sky-haze: color-mix(in srgb, var(--grano-300) 45%, var(--met-sky-lo));
  --met-sun:      var(--grano-500);
  --met-sun-edge: var(--grano-600);
  --met-sea-hi:   color-mix(in srgb, var(--mare-500) 82%, var(--bg-surface));
  --met-sea-lo:   color-mix(in srgb, var(--mare-700) 78%, var(--bg-surface));
  --met-wave:     color-mix(in srgb, var(--mare-700) 40%, transparent);
  --met-scrim:    color-mix(in srgb, var(--bg-surface) 90%, transparent);
  /* --met-cloud e --met-rain restano quelli di Ardesia (derivati da neutri) */

  /* ═══ SHADOWS ═══ */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 10px 32px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.12);
}

/* ═══ LAYER 1 — oklch / P3 wide-gamut ═══
   Sovrascrive gli hex con valori oklch dove supportato. Su display P3
   (Mac, iPhone) i colori si accendono; altrove il fallback hex regge. */
@supports (color: oklch(50% 0.1 100)) {
  :root {
    --grano-100:oklch(92.9% 0.042 79.0); --grano-200:oklch(87.0% 0.078 79.2);
    --grano-300:oklch(80.1% 0.118 79.6); --grano-400:oklch(73.5% 0.150 79.1);
    --grano-500:oklch(66.5% 0.138 79.4); --grano-600:oklch(58.9% 0.122 79.5);
    --grano-700:oklch(51.1% 0.106 79.7); --grano-800:oklch(43.0% 0.089 79.8);
    --grano-900:oklch(34.9% 0.072 79.5);

    --mare-100:oklch(92.9% 0.029 215.7); --mare-200:oklch(87.1% 0.052 214.7);
    --mare-300:oklch(80.0% 0.078 215.9); --mare-400:oklch(73.4% 0.101 215.4);
    --mare-500:oklch(66.6% 0.115 215.3); --mare-600:oklch(58.9% 0.104 215.5);
    --mare-700:oklch(51.1% 0.091 215.4); --mare-800:oklch(43.0% 0.076 215.2);
    --mare-900:oklch(34.9% 0.062 216.3);

    --ulivo-100:oklch(93.0% 0.034 131.4); --ulivo-200:oklch(87.0% 0.061 130.2);
    --ulivo-300:oklch(80.0% 0.091 130.4); --ulivo-400:oklch(73.4% 0.119 130.6);
    --ulivo-500:oklch(66.5% 0.135 130.5); --ulivo-600:oklch(59.0% 0.128 130.7);
    --ulivo-700:oklch(51.1% 0.115 130.6); --ulivo-800:oklch(43.0% 0.097 130.5);
    --ulivo-900:oklch(34.9% 0.077 130.5);

    --lavanda-100:oklch(92.9% 0.034 278.5); --lavanda-200:oklch(87.0% 0.064 277.2);
    --lavanda-300:oklch(80.0% 0.101 277.1); --lavanda-400:oklch(73.6% 0.138 277.0);
    --lavanda-500:oklch(66.5% 0.179 277.2); --lavanda-600:oklch(59.0% 0.224 277.0);
    --lavanda-700:oklch(50.9% 0.225 277.1); --lavanda-800:oklch(42.9% 0.192 277.0);
    --lavanda-900:oklch(35.0% 0.152 276.9);

    --terracotta-100:oklch(93.0% 0.037 38.7); --terracotta-200:oklch(87.0% 0.072 38.9);
    --terracotta-300:oklch(80.1% 0.114 38.8); --terracotta-400:oklch(73.5% 0.145 38.6);
    --terracotta-500:oklch(66.4% 0.158 38.2); --terracotta-600:oklch(59.0% 0.153 38.7);
    --terracotta-700:oklch(51.1% 0.139 38.6); --terracotta-800:oklch(43.0% 0.117 38.3);
    --terracotta-900:oklch(35.1% 0.094 38.7);

    --mattone-100:oklch(92.9% 0.036 24.2); --mattone-200:oklch(87.0% 0.070 24.1);
    --mattone-300:oklch(80.0% 0.114 24.5); --mattone-400:oklch(73.5% 0.151 24.3);
    --mattone-500:oklch(66.6% 0.175 24.3); --mattone-600:oklch(59.0% 0.175 24.3);
    --mattone-700:oklch(51.1% 0.162 24.6); --mattone-800:oklch(42.9% 0.136 24.5);
    --mattone-900:oklch(35.0% 0.110 24.8);
  }
}