/* ===================================================
   EYECUBE Design System — Regime NOTTURNO
   Derivato da tokens.json v1.1.0
   Spec: vault/eyecube/immagine-coordinata/brand-system-eyecube.md
   Validato su Brand Kit Canva (id kAHKdcfJ3lI) il 26/05/2026
=================================================== */

:root,
[data-regime="notturno"] {
  /* --- Colori fisici (9 invarianti tra regimi) --- */
  --notte:         #0A0A0A;
  --inchiostro:    #1A1A1A;
  --petrolio:      #0E2B36;
  --salvia:        #3F6B5B;
  --panna-light:   #FBF8F2;
  --panna:         #F4EFE6;
  --panna-warm:    #E8DFCE;
  --oro-champagne: #C9A96A;
  --oro-brunito:   #8B7042;

  /* Alpha derivati */
  --panna-dim:        rgba(244, 239, 230, 0.55);
  --panna-ghost:      rgba(244, 239, 230, 0.12);
  --inchiostro-dim:   rgba(26, 26, 26, 0.55);
  --inchiostro-ghost: rgba(26, 26, 26, 0.12);
  --oro-ghost:        rgba(201, 169, 106, 0.15);
  --oro-dim:          rgba(201, 169, 106, 0.45);
  --salvia-ghost:     rgba(63, 107, 91, 0.15);
  --salvia-dim:       rgba(63, 107, 91, 0.45);

  /* --- Var semantiche NOTTURNE --- */
  --color-bg-base:         var(--notte);
  --color-bg-elevated:     var(--inchiostro);
  --color-bg-accent-soft:  var(--petrolio);
  --color-bg-accent-cool:  var(--salvia);
  --color-text-primary:    var(--panna);
  --color-text-dim:        var(--panna-dim);
  --color-text-ghost:      var(--panna-ghost);
  --color-accent:          var(--oro-champagne);
  --color-accent-soft:     var(--oro-dim);
  --color-accent-ghost:    var(--oro-ghost);
  --color-accent-cool:     var(--salvia);
  --color-accent-cool-soft: var(--salvia-dim);
  --color-rule:            var(--oro-ghost);

  /* --- Tipografia --- */
  --ff-display: 'EB Garamond', Georgia, serif;
  --ff-body:    'Mona Sans', 'Helvetica Neue', sans-serif;
  --ff-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --text-d1:   clamp(52px, 5.5vw, 80px);
  --text-d2:   clamp(36px, 3.8vw, 56px);
  --text-h1:   clamp(28px, 2.8vw, 40px);
  --text-h2:   clamp(20px, 1.9vw, 28px);
  --text-h3:   clamp(14px, 1.2vw, 18px);
  --text-lede: clamp(15px, 1.15vw, 18px);
  --text-body: clamp(13px, 0.9vw, 15px);
  --text-cap:  clamp(9px, 0.7vw, 11px);
  --text-mono: clamp(11px, 0.75vw, 13px);

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.65;
  --lh-loose:  1.78;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.05em;
  --ls-wider:  0.15em;
  --ls-widest: 0.3em;

  /* --- Spaziatura (4pt scale) --- */
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;

  /* --- Griglia --- */
  --grid-columns: 12;
  --gutter: 24px;
  --margin: 64px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 200ms;
  --t-mid:  400ms;
  --t-slow: 700ms;

  /* --- Page chrome --- */
  --header-h: 72px;
  --footer-h: 52px;
}