/* ==========================================================================
   ASGroup 2026 — Design tokens (UNICA fonte dei valori di design)
   Colori in OKLCH con fallback hex (i browser senza OKLCH usano il fallback).
   Direzione: architettonico premium minimale — bianco/nero del brand,
   molto respiro, un solo accento freddo sobrio (azzurro acciaio).
   Nessun valore colore hardcoded altrove: usare sempre var(--ag-*).
   ========================================================================== */

:root {
  /* --- Palette primitiva (fallback hex prima, OKLCH dopo via @supports) --- */
  --ag-ink:        #15171c;   /* near-black brand */
  --ag-ink-2:      #3b3e46;   /* testo secondario */
  --ag-muted:      #74777f;   /* testo attenuato / didascalie */
  --ag-line:       #e4e6ea;   /* bordi sottili */
  --ag-line-2:     #d3d6dc;   /* bordi più marcati */
  --ag-surface:    #fcfcfd;   /* paper di base */
  --ag-surface-2:  #f5f6f8;   /* pannello leggero */
  --ag-surface-3:  #ebedf1;   /* pannello/hover */

  --ag-accent:        #3f6ea3; /* azzurro acciaio sobrio */
  --ag-accent-strong: #2f5a8a; /* accento per hover/pressed */
  --ag-accent-tint:   #eef3f9; /* sfondo tenue accento */
  --ag-accent-ink:    #ffffff; /* testo su accento */

  --ag-on-ink:     #f4f5f7;    /* testo su superfici scure */
  --ag-on-ink-2:   #b9bcc4;    /* testo secondario su scuro */
  --ag-ink-line:   #2a2d34;    /* bordi su superfici scure */

  --ag-white:      #ffffff;
  --ag-scrim:      8 10 14;    /* terna RGB per overlay/gradient scuri */
  --ag-danger-bg:  #fdecec;    /* feedback errore (sfondo) */
  --ag-danger-ink: #a4302a;    /* feedback errore (testo) */

  /* --- Tipografia --- */
  --ag-font-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ag-fw-regular: 400;
  --ag-fw-medium: 500;
  --ag-fw-bold: 700;

  /* Scala tipografica fluida (clamp: min, preferito, max) */
  --ag-fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 5rem);
  --ag-fs-h1:      clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
  --ag-fs-h2:      clamp(1.65rem, 1.2rem + 2vw, 2.5rem);
  --ag-fs-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  --ag-fs-lead:    clamp(1.06rem, 1rem + 0.5vw, 1.3rem);
  --ag-fs-body:    1.0625rem;   /* 17px */
  --ag-fs-sm:      0.9375rem;   /* 15px */
  --ag-fs-xs:      0.8125rem;   /* 13px */

  --ag-lh-tight: 1.08;
  --ag-lh-snug: 1.25;
  --ag-lh-normal: 1.65;
  --ag-tracking-tight: -0.02em;
  --ag-tracking-wide: 0.14em;

  /* --- Spaziatura (scala 4px) --- */
  --ag-space-1: 0.25rem;
  --ag-space-2: 0.5rem;
  --ag-space-3: 0.75rem;
  --ag-space-4: 1rem;
  --ag-space-5: 1.5rem;
  --ag-space-6: 2rem;
  --ag-space-7: 3rem;
  --ag-space-8: 4rem;
  --ag-space-9: 6rem;
  --ag-space-10: 8rem;

  /* --- Layout --- */
  --ag-container: 1200px;
  --ag-container-narrow: 760px;
  --ag-container-wide: 1400px;
  --ag-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --ag-section-y: clamp(4rem, 2rem + 6vw, 8rem);

  /* --- Raggi / ombre --- */
  --ag-radius-sm: 8px;
  --ag-radius-md: 14px;
  --ag-radius-lg: 22px;
  --ag-radius-pill: 999px;
  --ag-shadow-sm: 0 1px 2px rgba(21,23,28,0.05), 0 1px 1px rgba(21,23,28,0.04);
  --ag-shadow-md: 0 10px 30px -12px rgba(21,23,28,0.18);
  --ag-shadow-lg: 0 30px 60px -22px rgba(21,23,28,0.25);

  /* --- Motion (principi Emil Kowalski: breve, naturale, intenzionale) --- */
  --ag-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ag-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ag-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ag-dur-fast: 120ms;
  --ag-dur-base: 200ms;
  --ag-dur-slow: 320ms;

  /* --- z-index --- */
  --ag-z-header: 1000;
  --ag-z-overlay: 1100;
  --ag-z-modal: 1200;
}

/* OKLCH per i browser che lo supportano (override dei fallback) */
@supports (color: oklch(0 0 0)) {
  :root {
    --ag-ink:        oklch(0.17 0.006 260);
    --ag-ink-2:      oklch(0.33 0.006 260);
    --ag-muted:      oklch(0.55 0.006 260);
    --ag-line:       oklch(0.92 0.004 260);
    --ag-line-2:     oklch(0.87 0.005 260);
    --ag-surface:    oklch(0.99 0.002 260);
    --ag-surface-2:  oklch(0.972 0.003 260);
    --ag-surface-3:  oklch(0.94 0.004 260);

    --ag-accent:        oklch(0.55 0.092 248);
    --ag-accent-strong: oklch(0.46 0.103 250);
    --ag-accent-tint:   oklch(0.965 0.018 248);
    --ag-accent-ink:    oklch(0.99 0 0);

    --ag-on-ink:     oklch(0.96 0.003 260);
    --ag-on-ink-2:   oklch(0.78 0.006 260);
    --ag-ink-line:   oklch(0.30 0.008 260);

    --ag-white:      oklch(1 0 0);
    --ag-danger-bg:  oklch(0.95 0.022 25);
    --ag-danger-ink: oklch(0.48 0.15 28);
  }
}