/* ==========================================================================
   weeby-tokens.css — Design tokens centralizzati per Weeby
   Light only. Dark mode roadmap futura: aggiungere [data-theme="dark"] override.
   Importato da weeby.css. Non importare direttamente.
   ========================================================================== */

:root {

  /* ============================================================
     COLORI — Sistema in OKLCH
     Tutti i neutri sono tinti verso warm beige (hue 75-80)
     per coerenza col brand crema. No #fff o #000 puri.
     ============================================================ */

  /* === Background hierarchy ===
     Strategia: bianco-dominant. Il warm-bg è ACCENT decorativo,
     mai dominante (era già il pattern landing, non riportarlo come fondo pagina). */
  --color-bg:           oklch(99%  0.005 80); /* canvas principale — quasi-bianco warm */
  --color-bg-elevated:  oklch(100% 0     0);  /* card, panel — bianco puro */
  --color-bg-sunken:    oklch(96%  0.014 80); /* sezioni alternate, cream tenuissimo */
  --color-bg-warm:      oklch(91%  0.030 75); /* SOLO ACCENT — hero landing, dettaglio, mai sfondo pagina */

  /* === Ink hierarchy === */
  --color-ink:          oklch(20%  0.005 80); /* testo primario */
  --color-ink-muted:    oklch(40%  0.005 80); /* testo secondario */
  --color-ink-subtle:   oklch(58%  0.005 80); /* caption, eyebrow, meta */
  --color-ink-disabled: oklch(70%  0.005 80); /* disabilitato */
  --color-ink-inverse:  oklch(99%  0.005 80); /* su fondi scuri */

  /* === Border hierarchy === */
  --color-border-subtle: oklch(92% 0.014 75); /* hairline soft */
  --color-border:        oklch(86% 0.018 75); /* default */
  --color-border-strong: oklch(78% 0.022 75); /* enfatizzato */

  /* === Tier Free === */
  /* Il tier Free non ha accent dedicato; usa neutri ink. */

  /* === Tier Plus (rosso/rosa Weeby) — equivalente OKLCH di #eb5457 === */
  --color-plus:          oklch(63% 0.180 22);
  --color-plus-hover:    oklch(56% 0.180 22);
  --color-plus-soft:     oklch(95% 0.025 22); /* bg tinted */
  --color-plus-border:   oklch(85% 0.080 22); /* border tinted */
  --color-plus-on:       oklch(99% 0.005 80); /* testo su plus pieno */

  /* === Tier AI Studio (viola — distinto da Plus rosa, evoca tech/AI) === */
  --color-ai:            oklch(58% 0.200 285);
  --color-ai-hover:      oklch(50% 0.200 285);
  --color-ai-soft:       oklch(95% 0.025 285);
  --color-ai-border:     oklch(85% 0.080 285);
  --color-ai-on:         oklch(99% 0.005 80);

  /* === Stati semantici === */
  --color-success:       oklch(58% 0.130 152);
  --color-success-soft:  oklch(95% 0.030 152);
  --color-warning:       oklch(72% 0.150  75);
  --color-warning-soft:  oklch(95% 0.030  75);
  --color-danger:        oklch(58% 0.200  22);
  --color-danger-soft:   oklch(95% 0.025  22);
  --color-info:          oklch(58% 0.130 240);
  --color-info-soft:     oklch(95% 0.030 240);

  /* === Alias retrocompatibili (nomi del vecchio weeby.css) === */
  --color-accent:       var(--color-plus);
  --color-accent-dark:  var(--color-plus-hover);
  --color-warm-bg:      var(--color-bg-warm);
  --color-white:        oklch(100% 0 0);
  --color-bg-soft:      var(--color-bg-sunken);
  --color-text:         var(--color-ink);
  --color-text-light:   var(--color-ink-muted);
  --color-text-muted:   var(--color-ink-subtle);
  --color-error:        var(--color-danger);


  /* ============================================================
     TIPOGRAFIA
     ============================================================ */

  /* === Font families === */
  --font-logo:    'Coiny', cursive;                                     /* solo wordmark */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;       /* heading display landing */
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;    /* UI + body */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;  /* dati, codici */

  --font-heading: var(--font-display); /* alias retro */

  /* === Type scale (px) === */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* === Line heights === */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* === Letter spacing === */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  /* === Font weights === */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* ============================================================
     SPACING — scala 4-base, non lineare per ritmo vario
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;


  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;


  /* ============================================================
     SHADOW
     Hue di base allineato al brand (warm 75) per evitare ombra fredda
     ============================================================ */
  --shadow-xs: 0 1px 2px  rgba(20, 14, 5, 0.04);
  --shadow-sm: 0 2px 6px  rgba(20, 14, 5, 0.06);
  --shadow-md: 0 6px 16px rgba(20, 14, 5, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 14, 5, 0.10);

  /* Focus rings per tier */
  --shadow-focus-default: 0 0 0 3px oklch(58% 0.005 80 / 0.20);
  --shadow-focus-plus:    0 0 0 3px oklch(63% 0.180 22 / 0.20);
  --shadow-focus-ai:      0 0 0 3px oklch(58% 0.200 285 / 0.20);


  /* ============================================================
     MOTION
     ============================================================ */
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   320ms;
  --motion-slower: 480ms;

  --easing-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easing-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in-out:    cubic-bezier(0.45, 0, 0.55, 1);

  --transition: var(--motion-base) var(--easing-out); /* alias retro */


  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:         1120px;
  --container-narrow:       720px;
  --container-wide:        1440px;
  --header-height:           80px;
  --header-height-compact:   64px;


  /* ============================================================
     Z-INDEX scale
     ============================================================ */
  --z-base:      0;
  --z-raised:   10;
  --z-sticky:   50;
  --z-dropdown: 100;
  --z-overlay:  500;
  --z-modal:    800;
  --z-toast:   1000;
}


/* Reduced motion: token motion azzerati così tutte le transition collassano */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:    0.01ms;
    --motion-base:    0.01ms;
    --motion-slow:    0.01ms;
    --motion-slower:  0.01ms;
  }
}