/* KairosAI Design System v1.1 - tokens
   Sorgente: /brand/KairosAI_DesignSystem_v1.1.md
   Niente valori inline nel sito: usare sempre var(--token).
*/

:root {
  /* === BRAND, 5 colori + nero === */
  --color-ink:   #0F1C24;
  --color-blue:  #3060C0;
  --color-cyan:  #8DE4FF;
  --color-mint:  #90FFDC;
  --color-sage:  #87CBAC;
  --color-gray:  #6F757D;

  /* === SURFACE === */
  --color-bg:         #FFFFFF;
  --color-bg-subtle:  #F7F8F9;
  --color-bg-muted:   #EFF1F3;
  --color-bg-inverse: var(--color-ink);

  /* === TESTO === */
  --color-text:           var(--color-ink);
  --color-text-soft:      #2C343A;
  --color-text-muted:     var(--color-gray);
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      var(--color-blue);
  --color-text-link-hover:#264C99;
  --color-text-placeholder:#9AA0A6;

  /* === BORDI === */
  --color-border:        #DDE0E3;
  --color-border-strong: #C2C7CB;
  --color-border-focus:  var(--color-blue);

  /* === CTA === */
  --color-cta:        var(--color-blue);
  --color-cta-hover:  #2854A8;
  --color-cta-active: #1F4488;
  --color-cta-text:   #FFFFFF;

  /* === TINTE SOFT === */
  --color-blue-soft: #E0E7F5;
  --color-cyan-soft: #E7F7FF;
  --color-mint-soft: #DCFCEE;
  --color-sage-soft: #DEF0E6;

  /* === ACCENT (AI tematico, mai CTA) === */
  --color-accent:      var(--color-mint);
  --color-accent-text: var(--color-ink);

  /* === STATI FUNZIONALI (form only) === */
  --color-system-error:   #DC2626;
  --color-system-warning: #B7791F;
  --color-system-success: #15803D;

  /* === TIPOGRAFIA === */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* === SPAZI (scala 4px) === */
  --space-0:  0;
  --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;
  --space-28: 7rem;
  --space-32: 8rem;

  /* === CONTAINER E GRIGLIA === */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --grid-gutter:   var(--space-6);

  /* === BORDI, RAGGI === */
  --border-width:        1px;
  --border-width-strong: 2px;
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* === OMBRE (tinte navy) === */
  --shadow-xs: 0 1px 2px 0 rgba(15, 28, 36, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 28, 36, 0.08), 0 1px 2px 0 rgba(15, 28, 36, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 28, 36, 0.08), 0 2px 4px -2px rgba(15, 28, 36, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(15, 28, 36, 0.10), 0 4px 8px -2px rgba(15, 28, 36, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(15, 28, 36, 0.18);

  --ring-focus: 0 0 0 3px rgba(48, 96, 192, 0.30);

  /* === MOTION === */
  --dur-micro: 150ms;
  --dur-hover: 250ms;
  --dur-enter: 400ms;
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);

  /* === SEZIONI (decisione bundle design: 112px desktop) === */
  --section-pad-y-mobile:  72px;
  --section-pad-y-desktop: 112px;
  --header-height: 88px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}