/* ============================================
   VARIABLES.CSS — Studio Cambria
   Palette colori e design tokens
   ============================================ */

:root {
  /* ── PALETTE BRAND ── */
  
  /* Primari */
  --brand-navy:        #0D1B2A;   /* Blu notte profondo — autorità assoluta */
  --brand-navy-mid:    #1A3050;   /* Variante media — hover, sezioni */
  --brand-gold:        #C9892A;   /* Oro caldo — accento, CTA, highlights */
  --brand-gold-light:  #E2A84B;   /* Oro chiaro — hover states */
  --brand-dark:        #080F17;   /* Sfondo scuro — footer, hero dark */

  /* Neutri premium */
  --brand-white:       #FDFAF6;   /* Bianco caldo — sfondo principale */
  --brand-cream:       #F3EDE3;   /* Crema — sfondo alternato, sezioni chiare */
  --brand-charcoal:    #1C1C1E;   /* Quasi nero — testo principale */
  --brand-stone:       #8A8580;   /* Grigio caldo — testo secondario */
  --brand-border:      #DDD8D0;   /* Bordo caldo — card, separatori */

  /* Alias semantici */
  --color-primary:     var(--brand-navy);
  --color-primary-mid: var(--brand-navy-mid);
  --color-accent:      var(--brand-gold);
  --color-accent-light:var(--brand-gold-light);
  /* Gold accessibile su sfondi chiari (≥4.5:1 su cream #F3EDE3) */
  --color-accent-accessible: #8B5E0A;
  --color-white:       var(--brand-white);
  --color-bg:          var(--brand-cream);
  --color-bg-dark:     var(--brand-dark);
  --color-text:        var(--brand-charcoal);
  --color-text-muted:  var(--brand-stone);
  --color-border:      var(--brand-border);

  /* Superfici: sfondi che si invertono in night mode */
  --color-surface:     var(--brand-white);
  --color-surface-alt: var(--brand-cream);

  /* Semantici */
  --color-success: #2F855A;
  --color-warning: #C05621;
  --color-error:   #C53030;

  /* ── TIPOGRAFIA ── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', Consolas, monospace;
  --font-heading: var(--font-display);

  /* Scala tipografica */
  --text-xs:   0.75rem;    /* 12px — label, caption */
  --text-sm:   0.875rem;   /* 14px — testo secondario */
  --text-base: 1rem;       /* 16px — corpo */
  --text-lg:   1.125rem;   /* 18px — lead paragraph */
  --text-xl:   1.25rem;    /* 20px — sottotitoli */
  --text-2xl:  1.5rem;     /* 24px — H3 */
  --text-3xl:  1.875rem;   /* 30px — H2 */
  --text-4xl:  2.25rem;    /* 36px — H1 pagine interne */
  --text-5xl:  3rem;       /* 48px — H1 homepage */
  --text-6xl:  3.75rem;    /* 60px — headline hero grande */

  /* Pesi */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line height */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── SPAZIATURA (base 4px) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── LAYOUT ── */
  --container-max:     1200px;
  --container-padding: 1.5rem;
  --grid-cols:         12;
  --grid-gap:          1.5rem;

  /* Breakpoints (reference only — usare in @media) */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── EFFETTI ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.16);
  
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── GLASSMORPHISM ── */
  --glass-bg:           rgba(253, 250, 246, 0.05);
  --glass-bg-strong:    rgba(253, 250, 246, 0.08);
  --glass-border:       rgba(255, 255, 255, 0.08);
  --glass-border-strong:rgba(255, 255, 255, 0.12);
  --glass-blur:         12px;
  --glass-blur-strong:  20px;

  /* Glass light (per hero chiara) */
  --glass-bg-light:     rgba(253, 250, 246, 0.6);
  --glass-border-light: rgba(221, 216, 208, 0.5);

  /* ── TINT VARIABLES (per night mode) ── */
  --gold-tint:             rgba(201, 137, 42, 0.12);
  --gold-tint-strong:      rgba(201, 137, 42, 0.15);
  --navy-tint:             rgba(13, 27, 42, 0.08);
  --navy-tint-light:       rgba(13, 27, 42, 0.06);
  --color-card-shadow:     rgba(0, 0, 0, 0.05);
  --color-card-shadow-ring:rgba(0, 0, 0, 0.03);

  /* ── NIGHT MODE: colore testo su sezioni chiare quando usano navy ── */
  --color-heading-on-light: var(--brand-navy);
}

/* ============================================
   NIGHT MODE — Override automatico al tramonto
   ============================================ */

html[data-theme="night"] {
  /* Superfici: sfondi chiaro → scuro */
  --color-surface:     #0D1117;
  --color-surface-alt: #161B22;
  --color-bg:          #161B22;

  /* Testo: scuro → chiaro */
  --brand-charcoal:    #E6E1DB;
  --brand-stone:       #9CA3AF;
  --brand-border:      #2D333B;

  /* Tints su sfondo scuro */
  --gold-tint:             rgba(201, 137, 42, 0.15);
  --gold-tint-strong:      rgba(201, 137, 42, 0.22);
  --navy-tint:             rgba(253, 250, 246, 0.04);
  --navy-tint-light:       rgba(253, 250, 246, 0.03);
  --color-card-shadow:     rgba(0, 0, 0, 0.3);
  --color-card-shadow-ring:rgba(0, 0, 0, 0.2);

  /* Shadows più profondi */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.3);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.35);

  /* Glass light → glass dark */
  --glass-bg-light:     rgba(22, 27, 34, 0.6);
  --glass-border-light: rgba(45, 51, 59, 0.5);

  /* Heading su sezioni chiare: navy → bianco caldo */
  --color-heading-on-light: #E6E1DB;
  /* In night mode le superfici sono scure: il gold standard è già accessibile */
  --color-accent-accessible: var(--color-accent);
}

/* ── Override specifici per elementi con brand-navy hardcoded ── */

html[data-theme="night"] .hero-title {
  color: var(--color-heading-on-light);
}

html[data-theme="night"] .hero-subtitle {
  color: var(--brand-stone);
}

html[data-theme="night"] .text-reveal-text .word .word-bg,
html[data-theme="night"] .text-reveal-text .word .word-fg {
  color: var(--color-heading-on-light);
}

html[data-theme="night"] .stat-number-inline {
  color: var(--color-accent);
}

html[data-theme="night"] .btn-hero-ghost {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

html[data-theme="night"] .btn-hero-ghost .btn-hover-dot {
  background: var(--color-accent);
}

html[data-theme="night"] .btn-secondary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

html[data-theme="night"] .btn-secondary .btn-hover-dot {
  background: var(--color-accent);
}

/* Hero primary button: navy text su gold → light text su gold */
html[data-theme="night"] .btn-hero-primary {
  color: var(--color-heading-on-light);
}

html[data-theme="night"] .btn-hero-primary .btn-hover-content {
  color: var(--color-heading-on-light);
}

/* Proof card featured: navy bg su sezione chiara → accent tint */
html[data-theme="night"] .proof-card-featured {
  background: rgba(201, 137, 42, 0.15);
  border-color: rgba(201, 137, 42, 0.3);
}

/* Bento card bando badge: navy text → light text */
html[data-theme="night"] .bento-card-bando {
  color: var(--color-accent);
}

/* Form focus: navy border → accent */
html[data-theme="night"] .form-group input:focus,
html[data-theme="night"] .form-group textarea:focus,
html[data-theme="night"] .form-group select:focus {
  border-color: var(--color-accent);
}

/* Scrollbar hover: navy → accent */
html[data-theme="night"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Problem card slides: testo bianco deve restare bianco su gradient colorati */
html[data-theme="night"] .problem-slide-text {
  color: #FDFAF6;
}

html[data-theme="night"] .problem-card-slide .btn {
  color: #FDFAF6;
}

/* Proof card featured: testo interno deve restare chiaro */
html[data-theme="night"] .proof-card-featured .proof-number {
  color: var(--color-accent-light);
}

html[data-theme="night"] .proof-card-featured .proof-label,
html[data-theme="night"] .proof-card-featured .proof-sublabel {
  color: rgba(253, 250, 246, 0.85);
}

/* Transizione fluida tra temi */
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
  transition: background-color 0.6s ease,
              color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease !important;
}