/* ============================================
   KAYRÒS INGEGNERIA — Design Tokens
   ============================================ */

:root {
  /* ══════════════════════════════════════════
     BASE MONOCROMATICA
     ══════════════════════════════════════════ */
  --bianco: #FFFFFF;
  --bianco-sporco: #FAFAFA;
  --grigio-chiaro: #E8E8E8;
  --grigio-medio: #737373;
  --grigio-scuro: #404040;
  --nero-soft: #1A1A1A;
  --nero: #0A0A0A;

  /* ══════════════════════════════════════════
     COLORE BRAND: #077582
     Sfumature generate dal colore principale
     ══════════════════════════════════════════ */
  --brand: #077582;              /* COLORE PRINCIPALE */
  --brand-hover: #065F6B;        /* Hover su elementi brand */
  --brand-scuro: #044A54;        /* Testo brand su sfondi chiari */
  --brand-profondo: #032E33;     /* Sfondi hero, sezioni d'impatto */
  --brand-chiaro: #0A909F;       /* Accenti secondari */

  /* ----------------------------------------
     TYPOGRAPHY — Font Stack
     ---------------------------------------- */
  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ----------------------------------------
     TYPOGRAPHY — Scale (fluid)
     ---------------------------------------- */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 5rem);

  /* ----------------------------------------
     SPACING — 8px base system
     ---------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ----------------------------------------
     LAYOUT — Grid & Container
     ---------------------------------------- */
  --gutter: clamp(1rem, 2vw, 2rem);
  --max-width: 1440px;

  /* ----------------------------------------
     BREAKPOINTS (for reference in JS)
     ---------------------------------------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ----------------------------------------
     BORDERS
     ---------------------------------------- */
  --border-thin: 1px solid var(--grigio-chiaro);
  --border-medium: 2px solid var(--nero);
  --border-accent: 6px solid var(--brand);
}