/* ============================================================
   STR4T0S Design Tokens — v1.0
   Apple-inspired aesthetic: clean sans-serif, generous whitespace,
   neutral palette, soft motion. NO Apple proprietary assets used.
   Fonts: Inter (self-host or Google Fonts) + system-ui fallback.
   ============================================================ */

:root {
  /* ───── PALETTE — Neutral scale (warm-tinted near-white/black) ───── */
  --neutral-0:    #ffffff;
  --neutral-50:   #fbfbfd;  /* page background, hero canvas */
  --neutral-100:  #f5f5f7;  /* secondary background, panels */
  --neutral-200:  #e8e8ed;  /* hairline borders, dividers */
  --neutral-300:  #d2d2d7;  /* subtle borders */
  --neutral-400:  #a1a1a6;  /* muted text, disabled */
  --neutral-500:  #86868b;  /* body secondary */
  --neutral-600:  #6e6e73;  /* body tertiary */
  --neutral-700:  #515154;  /* body emphasized */
  --neutral-800:  #2c2c2e;  /* near-black surface (dark mode) */
  --neutral-900:  #1d1d1f;  /* primary text, near-black */
  --neutral-1000: #000000;

  /* ───── PALETTE — Semantic accents (used sparingly) ───── */
  --accent-link:     #0066cc;  /* primary link/CTA */
  --accent-link-hover: #004499;
  --accent-positive: #248a3d;  /* success/online */
  --accent-negative: #c8252d;  /* error/delete */
  --accent-warn:     #b25000;  /* warning/attention */

  /* ───── PALETTE — Semantic aliases (use these in components) ───── */
  --bg-page:         var(--neutral-50);
  --bg-surface:      var(--neutral-0);
  --bg-elevated:     var(--neutral-100);
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-muted:      var(--neutral-400);
  --text-on-accent:  var(--neutral-0);
  --border-subtle:   var(--neutral-200);
  --border-strong:   var(--neutral-300);

  /* ───── TYPOGRAPHY — Stack ───── */
  --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* ───── TYPOGRAPHY — Scale (modular, mobile-first) ───── */
  --text-xs:      0.75rem;     /* 12 — captions, fine print */
  --text-sm:      0.875rem;    /* 14 — meta, footnotes */
  --text-base:    1rem;        /* 16 — body */
  --text-lg:      1.125rem;    /* 18 — body emphasized */
  --text-xl:      1.375rem;    /* 22 — subhead */
  --text-2xl:     1.75rem;     /* 28 — h3 */
  --text-3xl:     2.25rem;     /* 36 — h2 */
  --text-4xl:     3rem;        /* 48 — h1 */
  --text-5xl:     4rem;        /* 64 — hero */
  --text-6xl:     5.5rem;      /* 88 — display hero */
  --text-7xl:     7rem;        /* 112 — mega display (desktop only) */

  /* ───── TYPOGRAPHY — Line heights ───── */
  --leading-tight:  1.1;       /* display, hero */
  --leading-snug:   1.25;      /* headings */
  --leading-normal: 1.5;       /* body */
  --leading-relaxed: 1.65;     /* long-form */

  /* ───── TYPOGRAPHY — Weights (Inter) ───── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ───── TYPOGRAPHY — Letter spacing ───── */
  --tracking-tight:  -0.022em;  /* display, hero (Apple-style negative) */
  --tracking-snug:   -0.015em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.015em;   /* labels, buttons */

  /* ───── SPACING — 4px base scale ───── */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.25rem;   /* 20 */
  --space-6:   1.5rem;    /* 24 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-32:  8rem;      /* 128 — section padding desktop */
  --space-40:  10rem;     /* 160 — large hero padding */

  /* ───── LAYOUT — Container widths ───── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;   /* full content width Apple-style */
  --gutter:         var(--space-6);

  /* ───── RADIUS — Generous Apple-style ───── */
  --radius-none: 0;
  --radius-sm:   6px;     /* tags, inline elements */
  --radius-md:   12px;    /* buttons, inputs */
  --radius-lg:   18px;    /* cards, panels */
  --radius-xl:   28px;    /* large surfaces, modals */
  --radius-2xl:  36px;    /* hero cards, feature blocks */
  --radius-full: 9999px;

  /* ───── SHADOWS — Soft elevation (subtle, not harsh) ───── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.12);

  /* ───── MOTION — Curves (soft, organic) ───── */
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ───── MOTION — Durations ───── */
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  500ms;
  --duration-deliberate: 700ms;  /* scroll reveals, hero animations */

  /* ───── Z-INDEX — Layering ───── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ───── DARK MODE ─────
   Strategia 3 stati gestiti da str4t0s.js:
   - default (no data-theme): segue prefers-color-scheme
   - [data-theme="light"]: forza light (override OS dark)
   - [data-theme="dark"]:  forza dark  (override OS light)
   Le regole dark sono duplicate in 2 blocchi per coprire i 2 trigger.
*/

/* Block A — auto: prefers-color-scheme dark MA non override esplicito a light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:        #000000;
    --bg-surface:     #1d1d1f;
    --bg-elevated:    #2c2c2e;
    --text-primary:   #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted:     #6e6e73;
    --text-on-accent: var(--neutral-0);
    --border-subtle:  #2c2c2e;
    --border-strong:  #3a3a3c;
    --accent-link:    #2997ff;
    --accent-link-hover: #5cb0ff;

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.7);
  }
}

/* Block B — explicit: [data-theme="dark"] forza dark indipendente dall'OS */
:root[data-theme="dark"] {
  --bg-page:        #000000;
  --bg-surface:     #1d1d1f;
  --bg-elevated:    #2c2c2e;
  --text-primary:   #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted:     #6e6e73;
  --text-on-accent: var(--neutral-0);
  --border-subtle:  #2c2c2e;
  --border-strong:  #3a3a3c;
  --accent-link:    #2997ff;
  --accent-link-hover: #5cb0ff;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 32px 80px rgba(0, 0, 0, 0.7);
}

/* Smooth transition tra temi quando l'utente toggle */
:root {
  transition: background-color var(--duration-base) var(--ease-out-quart),
              color var(--duration-base) var(--ease-out-quart);
}

/* ───── REDUCED MOTION ───── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:  0ms;
    --duration-base:  0ms;
    --duration-slow:  0ms;
    --duration-deliberate: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}