/* ============================================================
   RiBiFlex - Design Tokens
   Source of truth: colori, tipografia, spaziatura, radius, ombre.
   Temi chiaro/scuro speculari via [data-theme].
   ============================================================ */

/* Smooth scroll nativo + offset per header sticky; disattivato per chi preferisce meno movimento */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Brand constants (non cambiano col tema) ---------- */
:root {
  --brand-ink:      #1C1C1A;
  --brand-mint:     #00C896;
  --brand-mint-dk:  #009B74;
  --brand-mint-hi:  #7FFFD4;
  --brand-ground:   #F7F7F5;

  /* Tipografia */
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scala tipografica (size / line-height / tracking) */
  --fs-display-xl: 88px;  --lh-display-xl: 0.98;  --tr-display-xl: -0.03em;
  --fs-display-l:  clamp(36px, 5.2vw, 64px);  --lh-display-l:  1.05;   --tr-display-l:  -0.025em;
  --fs-display:    40px;  --lh-display:    1.05;  --tr-display:    -0.5px;
  --fs-h1:         28px;  --lh-h1:         1.12;  --tr-h1:         -0.3px;
  --fs-h2:         20px;  --lh-h2:         1.28;  --tr-h2:         -0.2px;
  --fs-h3:         17px;  --lh-h3:         1.35;  --tr-h3:         -0.1px;
  --fs-body-lg:    18px;  --lh-body-lg:    1.6;
  --fs-body:       16px;  --lh-body:       1.6;
  --fs-small:      13px;  --lh-small:      1.5;
  --fs-label:      11px;  --lh-label:      1.4;   --tr-label: 0.09em;
  --fs-mono:       11px;  --tr-mono: 0.06em;

  /* Pesi */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-extra:   800;

  /* Spaziatura (base 4px) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* Hairline border width (firma del brand) */
  --hairline: 0.5px;

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1320px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   TEMA CHIARO (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superfici */
  --bg:            #F7F7F5;
  --surface:       #FFFFFF;
  --surface-2:     #FBFBFA;
  --surface-inset: #F2F2EF;
  --surface-sunken:#EFEFEC;

  /* Bordi */
  --border:        #E4E4E0;
  --border-strong: #D2D2CB;

  /* Testo */
  --text:    #1C1C1A;
  --text-2:  #5A5955;
  --text-3:  #AEADA8;
  --text-on-accent: #07261E;

  /* Accento (mint) */
  --accent:        #00C896;
  --accent-strong: #009B74;  /* hover, link */
  --accent-hi:     #7FFFD4;
  --accent-tint:   #E6FBF5;
  --accent-tint-2: #CFF6E9;
  --accent-line:   #B3F0DE;

  /* Semantici */
  --success:      #009B74;  --success-tint: #E6FBF5;  --success-line: #B3F0DE;
  --warning:      #B07A12;  --warning-tint: #FBF2DD;  --warning-line: #ECD9A8;
  --danger:       #B3321A;  --danger-tint:  #FDE7E3;  --danger-line:  #F3C7BD;
  --info:         #2F6E91;  --info-tint:    #E7F1F6;  --info-line:    #C3DCE8;

  /* Dati energia V2G */
  --data-charge:    #00C896;  /* ricarica */
  --data-discharge: #2F6E91;  /* immissione in rete */
  --data-grid:      #B07A12;  /* prelievo rete */
  --data-track:     #ECECE8;  /* binario chart */

  /* Ombre */
  --shadow-xs: 0 1px 2px rgba(28,28,26,0.05);
  --shadow-sm: 0 1px 3px rgba(28,28,26,0.06), 0 1px 2px rgba(28,28,26,0.04);
  --shadow-md: 0 4px 16px rgba(28,28,26,0.07), 0 1px 3px rgba(28,28,26,0.05);
  --shadow-lg: 0 12px 40px rgba(28,28,26,0.10), 0 2px 8px rgba(28,28,26,0.05);
  --glow-mint: 0 8px 28px rgba(0,200,150,0.08);
  --ring: 0 0 0 3px rgba(0,200,150,0.30);

  /* Pannelli "sempre scuri" (hero, footer, card-ink) - non si invertono col tema */
  --invert-bg:      #1C1C1A;
  --invert-text:    #F7F7F5;
  --invert-text-2:  rgba(247,247,245,0.72);
  --invert-border:  rgba(247,247,245,0.12);
}

/* ============================================================
   TEMA SCURO (speculare)
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #1C1C1A;
  --surface:       #242421;
  --surface-2:     #2A2A26;
  --surface-inset: #1A1A18;
  --surface-sunken:#161614;

  --border:        #35352F;
  --border-strong: #46463F;

  --text:    #F7F7F5;
  --text-2:  #B4B3AD;
  --text-3:  #76756F;
  --text-on-accent: #06231C;

  --accent:        #00C896;
  --accent-strong: #2EDDAB;
  --accent-hi:     #7FFFD4;
  --accent-tint:   rgba(0,200,150,0.13);
  --accent-tint-2: rgba(0,200,150,0.22);
  --accent-line:   rgba(0,200,150,0.34);

  --success:      #2EDDAB;  --success-tint: rgba(0,200,150,0.13);  --success-line: rgba(0,200,150,0.30);
  --warning:      #E8B24A;  --warning-tint: rgba(232,178,74,0.14);  --warning-line: rgba(232,178,74,0.30);
  --danger:       #EC8068;  --danger-tint:  rgba(236,128,104,0.15); --danger-line:  rgba(236,128,104,0.32);
  --info:         #79AECE;  --info-tint:    rgba(121,174,206,0.15); --info-line:    rgba(121,174,206,0.32);

  --data-charge:    #00C896;
  --data-discharge: #79AECE;
  --data-grid:      #E8B24A;
  --data-track:     #2E2E29;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.16);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.18);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.34), 0 4px 12px rgba(0,0,0,0.22);
  --glow-mint: 0 8px 28px rgba(0,200,150,0.12);
  --ring: 0 0 0 3px rgba(0,200,150,0.40);

  /* Pannelli sempre scuri: in dark vanno più in profondità + bordo per stacco */
  --invert-bg:      #121211;
  --invert-text:    #F7F7F5;
  --invert-text-2:  rgba(247,247,245,0.72);
  --invert-border:  rgba(247,247,245,0.10);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--text-on-accent); }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

img, svg { display: block; max-width: 100%; }

/* ============================================================
   UTILITY TIPOGRAFICHE
   ============================================================ */
.t-display-xl { font-family: var(--font-sans); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); font-weight: var(--fw-bold); }
.t-display-l  { font-family: var(--font-sans); font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--tr-display-l);  font-weight: var(--fw-bold); }
.t-display    { font-family: var(--font-sans); font-size: var(--fs-display);    line-height: var(--lh-display);    letter-spacing: var(--tr-display);    font-weight: var(--fw-bold); }
.t-h1         { font-family: var(--font-sans); font-size: var(--fs-h1);  line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: var(--fw-bold); }
.t-h2         { font-family: var(--font-sans); font-size: var(--fs-h2);  line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: var(--fw-medium); }
.t-h3         { font-family: var(--font-sans); font-size: var(--fs-h3);  line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: var(--fw-medium); }
.t-body-lg    { font-family: var(--font-sans); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-regular); }
.t-body       { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); }
.t-small      { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); color: var(--text-2); }
.t-label      { font-family: var(--font-sans); font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--tr-label); text-transform: uppercase; font-weight: var(--fw-medium); }
.t-mono       { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tr-mono); text-transform: uppercase; }

.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.text-accent { color: var(--accent-strong); }
.accent-mint { color: var(--accent); }

/* mono tick - la firma annotativa del brand */
.tick {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--accent-strong);
  white-space: nowrap;
}
.tick-muted { color: var(--text-3); }