/* ============================================================
   Callio Design Tokens v1.0  —  dark-first
   Generato da brand/tokens/design-tokens.json
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --c-violet-50:#F2EDFF; --c-violet-100:#E4DAFF; --c-violet-200:#CBB8FF;
  --c-violet-300:#AD8EFF; --c-violet-400:#8B5CF6; --c-violet-500:#6E3BFF;
  --c-violet-600:#5A26E6; --c-violet-700:#4818BD; --c-violet-800:#361294;
  --c-violet-900:#250C6B;

  --c-cyan-50:#E6FBFD; --c-cyan-100:#C4F5FA; --c-cyan-200:#8DEBF4;
  --c-cyan-300:#4EDDEC; --c-cyan-400:#14D1E8; --c-cyan-500:#00B5CC;
  --c-cyan-600:#0092A6; --c-cyan-700:#0B7183; --c-cyan-800:#0D5A68;
  --c-cyan-900:#0C4550;

  --c-ink-50:#F7F7FB; --c-ink-100:#EEEEF4; --c-ink-200:#DCDCE7;
  --c-ink-300:#BEBECF; --c-ink-400:#9696AE; --c-ink-500:#6F6F8A;
  --c-ink-600:#545469; --c-ink-700:#3E3E50; --c-ink-800:#26262F;
  --c-ink-900:#16161D; --c-ink-950:#0B0B14;

  /* ---- Gradienti firma ---- */
  --grad-signal: linear-gradient(135deg,#6E3BFF 0%,#8B5CF6 45%,#14D1E8 100%);
  --grad-aurora:
    radial-gradient(at 20% 20%, rgba(110,59,255,.33) 0px, transparent 55%),
    radial-gradient(at 80% 30%, rgba(20,209,232,.27) 0px, transparent 50%),
    radial-gradient(at 50% 85%, rgba(173,142,255,.20) 0px, transparent 55%);

  /* ---- Tipografia ---- */
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-sans:Inter,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',Consolas,monospace;

  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.25rem;
  --text-xl:1.5625rem; --text-2xl:1.9375rem; --text-3xl:2.4375rem;
  --text-4xl:3.0625rem; --text-5xl:3.8125rem;

  --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.55; --lh-relaxed:1.7;
  --tracking-tight:-.02em; --tracking-wide:.04em; --tracking-caps:.08em;

  /* ---- Spazio (griglia 4px) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* ---- Raggi ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* ---- Movimento ---- */
  --d-instant:80ms; --d-fast:160ms; --d-base:260ms; --d-slow:420ms; --d-pulse:2000ms;
  --e-out:cubic-bezier(.2,.8,.2,1);
  --e-in:cubic-bezier(.4,0,1,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.16,1,.3,1);
  --e-bounce:cubic-bezier(.34,1.56,.64,1);
  --stagger:24ms;

  /* ---- Z-index ---- */
  --z-dropdown:1000; --z-sticky:1100; --z-overlay:1200; --z-modal:1300;
  --z-popover:1400; --z-toast:1500; --z-softphone:1600;

  /* ---- Stati agente (invarianti fra i temi) ---- */
  --agent-available:#14C98E; --agent-oncall:#6E3BFF; --agent-wrapup:#14D1E8;
  --agent-paused:#FFB020;    --agent-ringing:#3B9BFF; --agent-offline:#6F6F8A;

  color-scheme: dark light;
}

/* ============================================================
   TEMA SCURO  (default — gli operatori stanno 8 ore sullo schermo)
   ============================================================ */
:root, [data-theme="dark"] {
  --bg-canvas:#0B0B14;
  --bg-surface:#16161D;
  --bg-surface-2:#1E1E28;
  --bg-surface-3:#26262F;
  --bg-inset:#0F0F17;
  --bg-hover:rgba(255,255,255,.045);
  --bg-active:rgba(110,59,255,.14);
  --bg-glass:rgba(30,30,40,.72);

  --fg-primary:#F7F7FB;
  --fg-secondary:#BEBECF;
  --fg-muted:#9696AE;
  --fg-subtle:#6F6F8A;
  --fg-on-accent:#FFFFFF;

  --border-subtle:rgba(255,255,255,.07);
  --border-default:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.20);
  --border-accent:#6E3BFF;

  --accent:#6E3BFF; --accent-hover:#7C4DFF; --accent-active:#5A26E6;
  --accent-soft:rgba(110,59,255,.16); --accent-fg:#AD8EFF;
  --accent-2:#14D1E8; --accent-2-soft:rgba(20,209,232,.14);

  --success:#14C98E; --success-soft:rgba(20,201,142,.14);
  --warning:#FFB020; --warning-soft:rgba(255,176,32,.14);
  --danger:#FF4D6A;  --danger-soft:rgba(255,77,106,.14);
  --info:#3B9BFF;    --info-soft:rgba(59,155,255,.14);
  --live:#8B5CF6;    --live-soft:rgba(139,92,246,.16);

  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.40), 0 4px 12px rgba(0,0,0,.24);
  --shadow-3:0 8px 24px rgba(0,0,0,.46), 0 2px 8px rgba(110,59,255,.14);
  --shadow-4:0 20px 48px rgba(0,0,0,.55), 0 8px 20px rgba(110,59,255,.18);
  --shadow-glow:0 0 0 3px rgba(110,59,255,.35);
  --shadow-glow-live:0 0 0 4px rgba(110,59,255,.22), 0 0 28px rgba(110,59,255,.45);
}

/* ============================================================
   TEMA CHIARO
   ============================================================ */
[data-theme="light"] {
  --bg-canvas:#F7F7FB;
  --bg-surface:#FFFFFF;
  --bg-surface-2:#FBFBFD;
  --bg-surface-3:#F2F2F7;
  --bg-inset:#EEEEF4;
  --bg-hover:rgba(11,11,20,.035);
  --bg-active:rgba(110,59,255,.08);
  --bg-glass:rgba(255,255,255,.78);

  --fg-primary:#0B0B14;
  --fg-secondary:#3E3E50;
  --fg-muted:#545469;
  --fg-subtle:#6F6F8A;
  --fg-on-accent:#FFFFFF;

  --border-subtle:rgba(11,11,20,.06);
  --border-default:rgba(11,11,20,.11);
  --border-strong:rgba(11,11,20,.20);
  --border-accent:#6E3BFF;

  --accent:#6E3BFF; --accent-hover:#5A26E6; --accent-active:#4818BD;
  --accent-soft:rgba(110,59,255,.10); --accent-fg:#4818BD;
  --accent-2:#0092A6; --accent-2-soft:rgba(0,146,166,.10);

  --success:#0FA97A; --success-soft:#E6F7F1;
  --warning:#B87400; --warning-soft:#FFF4E0;
  --danger:#D91E43;  --danger-soft:#FFE9ED;
  --info:#1E6FD9;    --info-soft:#E7F0FE;
  --live:#6E3BFF;    --live-soft:#F0EAFF;

  --shadow-1:0 1px 2px rgba(11,11,20,.06), 0 1px 3px rgba(110,59,255,.04);
  --shadow-2:0 2px 6px rgba(11,11,20,.07), 0 4px 12px rgba(110,59,255,.06);
  --shadow-3:0 8px 24px rgba(11,11,20,.09), 0 2px 8px rgba(110,59,255,.08);
  --shadow-4:0 20px 48px rgba(11,11,20,.14), 0 8px 20px rgba(110,59,255,.10);
  --shadow-glow:0 0 0 3px rgba(110,59,255,.25);
  --shadow-glow-live:0 0 0 4px rgba(110,59,255,.18), 0 0 24px rgba(110,59,255,.35);
}

/* ============================================================
   Primitive condivise
   ============================================================ */

/* Ogni numero che cambia nel tempo usa cifre a larghezza fissa */
.c-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* Signal Ring — agente in conversazione */
@keyframes callio-signal-ring {
  0%   { box-shadow:0 0 0 0 rgba(110,59,255,.55), 0 0 0 0 rgba(110,59,255,.35); }
  70%  { box-shadow:0 0 0 12px rgba(110,59,255,0), 0 0 0 22px rgba(110,59,255,0); }
  100% { box-shadow:0 0 0 0 rgba(110,59,255,0), 0 0 0 0 rgba(110,59,255,0); }
}
.c-signal-ring { animation:callio-signal-ring var(--d-pulse) var(--e-inout) infinite; }

/* Pulsazione dello stato live */
@keyframes callio-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.c-pulse { animation:callio-pulse 1.6s var(--e-inout) infinite; }

/* Entrata con stagger per righe di tabella / liste */
@keyframes callio-rise { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.c-rise { animation:callio-rise var(--d-base) var(--e-out) both; }

/* Aurora mesh — solo login e hero */
@keyframes callio-aurora { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-2%,1.5%,0) scale(1.06)} }
.c-aurora { background:var(--grad-aurora); animation:callio-aurora 18s var(--e-inout) infinite; will-change:transform; }

/* Pannello vetro — solo overlay flottanti, mai contenuto denso */
.c-glass {
  background:var(--bg-glass);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--border-default);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-4);
}

/* Bordo a gradiente 1px */
.c-grad-border { position:relative; background:var(--bg-surface); border-radius:var(--r-lg); }
.c-grad-border::before {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-signal);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* Focus ring unico per tutta la piattaforma */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm);
}

/* ============================================================
   Accessibilità — non negoziabile
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:120ms !important;
    scroll-behavior:auto !important;
  }
  .c-aurora,.c-signal-ring,.c-pulse { animation:none !important; }
}