/* ============================================================
   akkaz.dev — Design tokens (v2)
   Fonte: src/app/globals.css + i componenti in src/components
   del repo akkaz/AIportfolio, branch v2.

   Due temi alla pari:
     · dark  — è il sito. Default su :root.
     · light — documenti, stampa, slide chiare, superfici di terzi.
   Si cambia tema con una classe (.dark / .light) o con
   data-theme="dark|light" su qualsiasi antenato: i temi si
   possono anche annidare (un blocco chiaro dentro una pagina scura).

   Ogni coppia testo/fondo dichiarata qui è verificata WCAG AA:
   i rapporti sono nei commenti e nella card "Contrasto".
   ============================================================ */

@import url('./fonts.css');

/* ---------- PRIMITIVE: non cambiano con il tema ---------- */
:root {
  /* Scala neutra: zinc, con la sua leggera tinta violacea (hue ~286). */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Corallo: un solo accento, tre intensità. */
  --coral-400: #ff5a33;   /* accento sul buio */
  --coral-500: #ff4017;   /* accento sul chiaro, colore "di marca" */
  --coral-600: #d9330d;   /* riempimenti con testo bianco (4.74:1) */
  --coral-700: #c42c09;   /* hover dei riempimenti; testo piccolo sul chiaro */

  /* ---------- TIPOGRAFIA ---------- */
  --font-sans:    'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading: var(--font-mono);   /* i titoli sono mono: è l'identità */

  /* Scala. I tre gradini alti sono fluidi, gli altri fissi. */
  --text-display: clamp(2.25rem, 1.2rem + 4.2vw, 3.75rem);  /* 36 → 60 — hero */
  --text-h1:      clamp(1.875rem, 1.2rem + 2.8vw, 3rem);    /* 30 → 48 — chiusura / CTA */
  --text-h2:      clamp(1.5rem, 1rem + 2vw, 2.25rem);       /* 24 → 36 — titolo di sezione */
  --text-h3:      1.125rem;   /* 18 — titolo di cella, mono maiuscolo */
  --text-title:   1rem;       /* 16 — titolo di riga, mono */
  --text-lead:    1.125rem;   /* 18 — paragrafo d'apertura */
  --text-body:    1rem;       /* 16 */
  --text-sm:      0.875rem;   /* 14 */
  --text-ui:      0.75rem;    /* 12 — chip, bottoni piccoli, mono */
  --text-label:   0.6875rem;  /* 11 — etichette cliccabili */
  --text-micro:   0.625rem;   /* 10 — micro-label, mai cliccabile */

  --leading-display: 1.05;
  --leading-heading: 1.15;
  --leading-body:    1.65;

  --tracking-tight:  -0.025em;  /* display e titoli */
  --tracking-button:  0.04em;   /* bottoni, h3 maiuscoli */
  --tracking-ui:      0.08em;   /* etichette 11px */
  --tracking-label:   0.12em;   /* micro-label 10px */

  --measure: 65ch;              /* larghezza massima di un paragrafo */

  /* ---------- SPAZIO (griglia 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;

  --section-y:      clamp(4rem, 2rem + 8vw, 6rem);   /* ritmo verticale delle sezioni */
  --gutter:         1rem;
  --container:      64rem;    /* contenuto */
  --container-wide: 72rem;    /* binari strutturali */

  /* ---------- RAGGI (base 8px) ---------- */
  --radius:    0.5rem;
  --radius-sm: 0.25rem;   /* 4  — scheletri, dettagli */
  --radius-md: 0.375rem;  /* 6  — chip, bottoni piccoli, quadrati-icona */
  --radius-lg: 0.5rem;    /* 8  — bottoni, input, pannelli: il raggio di default */
  --radius-xl: 0.75rem;   /* 12 — solo contenitori molto grandi */
  --radius-dot: 999px;    /* solo punti e indicatori, mai contenitori */

  /* ---------- MOVIMENTO ---------- */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast:   150ms;   /* hover, colore */
  --dur-base:   250ms;   /* comparsa di elementi flottanti */
  --dur-reveal: 600ms;   /* ingresso di una sezione */
  --dur-hero:   700ms;   /* coreografia d'apertura */
  --stagger:    60ms;

  /* ---------- LIVELLI ---------- */
  --z-rails:   10;
  --z-sticky:  40;   /* status line, bottoni flottanti */
  --z-nav:     50;
  --z-popover: 60;
  --z-toast:   70;

  --blur-chrome: 20px;
}

/* ---------- TEMA DARK (default) ---------- */
:root,
.dark,
[data-theme='dark'] {
  color-scheme: dark;

  --bg:        var(--zinc-950);
  --surface-1: var(--zinc-900);   /* pannelli, celle */
  --surface-2: var(--zinc-800);   /* hover di cella, bolla del visitatore */

  --fg:        var(--zinc-100);   /* titoli — 18.1:1 su bg */
  --fg-strong: var(--zinc-200);   /* testo dell'agente, enfasi */
  --fg-body:   var(--zinc-400);   /* paragrafi — 7.8:1 su bg, 6.9:1 su surface-1 */
  --fg-muted:  #92929c;           /* etichette — 6.4:1 su bg, 5.7:1 su surface-1 */
  --fg-faint:  var(--zinc-600);   /* SOLO decorazione: angoli ASCII, separatori, disabilitato */

  --line:        color-mix(in oklab, var(--zinc-700) 40%, transparent);  /* bordo standard */
  --line-soft:   color-mix(in oklab, var(--zinc-500) 20%, transparent);  /* divisori di sezione, binari */
  --line-strong: color-mix(in oklab, var(--zinc-700) 80%, transparent);  /* input, chrome flottante */

  --brand:             var(--coral-400);  /* punti, cursore, bordi, icone — 6.4:1 su bg */
  --brand-text:        var(--coral-400);  /* testo piccolo in accento */
  --brand-solid:       var(--coral-600);  /* riempimento dei bottoni primari */
  --brand-solid-hover: var(--coral-700);
  --on-brand:          #ffffff;

  --ok:     #34d399;
  --warn:   #fbbf24;
  --danger: #f87171;
  --info:   #60a5fa;

  --shadow-float: 0 10px 24px -6px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4);
}

/* ---------- TEMA LIGHT ---------- */
.light,
[data-theme='light'] {
  color-scheme: light;

  --bg:        #f0f0f0;           /* grigio neutro, mai bianco pieno */
  --surface-1: #ffffff;
  --surface-2: var(--zinc-200);

  --fg:        var(--zinc-900);   /* 15.6:1 su bg */
  --fg-strong: var(--zinc-800);
  --fg-body:   var(--zinc-700);   /* 9.2:1 su bg */
  --fg-muted:  #5f5f6a;           /* 5.5:1 su bg, 6.3:1 su surface-1 */
  --fg-faint:  var(--zinc-400);   /* SOLO decorazione */

  --line:        color-mix(in oklab, var(--zinc-900) 14%, transparent);
  --line-soft:   color-mix(in oklab, var(--zinc-900) 8%, transparent);
  --line-strong: color-mix(in oklab, var(--zinc-900) 28%, transparent);

  --brand:             var(--coral-500);  /* grafica: 3.1:1 su bg, basta per elementi non testuali */
  --brand-text:        var(--coral-700);  /* testo piccolo — 5.0:1 su bg */
  --brand-solid:       var(--coral-600);
  --brand-solid-hover: var(--coral-700);
  --on-brand:          #ffffff;

  --ok:     #047857;
  --warn:   #a14a08;
  --danger: #b91c1c;
  --info:   #1d4ed8;

  --shadow-float: 0 10px 24px -6px rgb(0 0 0 / 0.14), 0 4px 8px -4px rgb(0 0 0 / 0.08);
}

/* ---------- DERIVATI: ricalcolati in ogni ambito di tema ---------- */
:root,
.dark,
.light,
[data-theme] {
  --brand-tint:   color-mix(in oklab, var(--brand) 8%, transparent);    /* fondo di un blocco in accento */
  --brand-line:   color-mix(in oklab, var(--brand) 40%, transparent);   /* bordo in hover */
  --ok-tint:      color-mix(in oklab, var(--ok) 9%, transparent);
  --ok-line:      color-mix(in oklab, var(--ok) 32%, transparent);
  --warn-tint:    color-mix(in oklab, var(--warn) 9%, transparent);
  --warn-line:    color-mix(in oklab, var(--warn) 32%, transparent);
  --danger-tint:  color-mix(in oklab, var(--danger) 9%, transparent);
  --danger-line:  color-mix(in oklab, var(--danger) 32%, transparent);
  --chrome:       color-mix(in oklab, var(--bg) 82%, transparent);      /* nav, status line: con blur */
  --surface-veil: color-mix(in oklab, var(--surface-1) 70%, transparent); /* prompt, card su mobile */

  /* Alias shadcn/ui: così i componenti del repo funzionano senza rimappature. */
  --background:         var(--bg);
  --foreground:         var(--fg);
  --card:               var(--surface-1);
  --card-foreground:    var(--fg);
  --popover:            var(--surface-1);
  --popover-foreground: var(--fg);
  --primary:            var(--fg);
  --primary-foreground: var(--bg);
  --secondary:          var(--surface-2);
  --secondary-foreground: var(--fg);
  --muted:              var(--surface-2);
  --muted-foreground:   var(--fg-muted);
  --accent:             var(--surface-2);
  --accent-foreground:  var(--fg);
  --destructive:        var(--danger);
  --border:             var(--line);
  --input:              var(--line-strong);
  --ring:               var(--brand);
}

/* ============================================================
   RUOLI TIPOGRAFICI (a livello di elemento)
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1, .h1, h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
  margin: 0;
}
.display { font-size: var(--text-display); line-height: var(--leading-display); }
h1, .h1  { font-size: var(--text-h1);      line-height: 1.1; }
h2, .h2  { font-size: var(--text-h2);      line-height: var(--leading-heading); }

h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h3);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
  color: var(--fg);
  margin: 0;
}

h4, .h4, .title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-title);
  line-height: 1.4;
  color: var(--fg);
  margin: 0;
}

p, .p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-body);
  text-wrap: pretty;
  margin: 0;
}
/* La misura ha specificità zero: qualsiasi componente la può allargare. */
:where(p) { max-width: var(--measure); }
.lead { font-size: var(--text-lead); }
.p-sm { font-size: var(--text-sm); line-height: 1.6; }

/* Etichetta 11px: è il minimo per qualunque cosa si possa cliccare. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--fg-muted);
  line-height: 1.3;
}

/* Micro-label 10px: didascalie di sistema, mai interattive. */
.micro {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
  line-height: 1.3;
}

code, .code, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* Cursore lampeggiante: chiude i titoli display come un prompt. */
@keyframes ak-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor {
  color: var(--brand);
  font-family: var(--font-mono);
  animation: ak-blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}
/* In stampa l'animazione può fermarsi sul fotogramma spento. */
@media print {
  .cursor { animation: none; }
}