/* ============================================================
   iBBricks · Design tokens (produzione)
   Portati dal design system in "iBBricks Design System/tokens/".
   Brand a due colori: Blu (#1f7cd2) + Verde (#2e9e54).
   Il colore di un brick codifica la sua funzionalita.
   I font sono caricati via <link> nell'HTML (non @import).
   ============================================================ */

:root {
  /* ─── Brand Blue (structural brick) ───────────────────────────── */
  --blue-50:  #eaf3fc;
  --blue-100: #cfe4f8;
  --blue-200: #9fc9f1;
  --blue-300: #6bace8;
  --blue-400: #4594e4;
  --blue-500: #1f7cd2;
  --blue-600: #1567b6;
  --blue-700: #105392;
  --blue-800: #0c4072;
  --blue-900: #082f55;

  /* ─── Brand Green (functional brick) ──────────────────────────── */
  --green-50:  #eaf7ee;
  --green-100: #cdebd6;
  --green-200: #a0d8b2;
  --green-300: #68c088;
  --green-400: #45ae69;
  --green-500: #2e9e54;
  --green-600: #248446;
  --green-700: #1c6b39;
  --green-800: #15522c;
  --green-900: #0f3d21;

  /* ─── Neutrals (cool slate) ───────────────────────────────────── */
  --ink:         #0e1116;
  --neutral-900: #16191f;
  --neutral-800: #21262e;
  --neutral-700: #353c46;
  --neutral-600: #4b5563;
  --neutral-500: #6b7480;
  --neutral-400: #98a1ad;
  --neutral-300: #c3c9d1;
  --neutral-200: #e2e6eb;
  --neutral-100: #f0f2f5;
  --neutral-50:  #f7f8fa;
  --white:       #ffffff;

  /* ─── Functional brick palette (colore = dominio) ─────────────── */
  --purple-50:  #f2ecfb;
  --purple-100: #e0d1f6;
  --purple-500: #7c4dd6;
  --purple-600: #6838c0;
  --purple-700: #54299e;

  --amber-50:  #fdf6e3;
  --amber-100: #f8e7b0;
  --amber-500: #eaa600;
  --amber-600: #c98a00;
  --amber-700: #9c6a00;

  --teal-50:  #e6f6f5;
  --teal-100: #c2e9e7;
  --teal-500: #0f9a98;
  --teal-600: #0a7d7b;
  --teal-700: #06605f;

  --orange-50:  #fdeee7;
  --orange-100: #f9d6c4;
  --orange-500: #e8642a;
  --orange-600: #c54f1d;
  --orange-700: #9d3e16;

  --pink-50:  #fceaf2;
  --pink-100: #f7cfe0;
  --pink-500: #d6478f;
  --pink-600: #ba3576;
  --pink-700: #97275e;

  --indigo-50:  #eceefb;
  --indigo-100: #d3d8f5;
  --indigo-500: #4f5bd5;
  --indigo-600: #3e49b8;
  --indigo-700: #313a94;

  /* ─── Semantic / status ───────────────────────────────────────── */
  --success-500: var(--green-500);
  --success-600: var(--green-600);
  --info-500:    var(--blue-500);
  --info-600:    var(--blue-600);
  --warning-500: #e8a317;
  --warning-600: #c4860a;
  --danger-500:  #d64545;
  --danger-600:  #b62f2f;

  /* ─── Semantic aliases (usare questi nei componenti) ──────────── */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-active: var(--blue-700);
  --color-on-primary:     var(--white);

  --color-secondary:        var(--green-500);
  --color-secondary-hover:  var(--green-600);
  --color-secondary-active: var(--green-700);
  --color-on-secondary:     var(--white);

  --text-strong:  var(--ink);
  --text-body:    var(--neutral-800);
  --text-muted:   var(--neutral-500);
  --text-subtle:  var(--neutral-400);
  --text-on-dark: var(--white);
  --text-link:    var(--blue-600);

  --surface-page:       var(--neutral-50);
  --surface-card:       var(--white);
  --surface-sunken:     var(--neutral-100);
  --surface-inverse:    var(--ink);
  --surface-blue-soft:  var(--blue-50);
  --surface-green-soft: var(--green-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--blue-500);

  --ring-focus: 0 0 0 3px rgba(31, 124, 210, 0.35);

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

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

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-label:  0.06em;

  /* ─── Spacing (4px stud-pitch) ────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --container-max:  1200px;
  --container-wide: 1360px;
  --gutter: var(--space-5);
  --stud: 12px;

  /* ─── Radius ──────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-brick: 8px;

  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ─── Shadows ─────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-sm:  0 1px 3px rgba(14, 17, 22, 0.08), 0 1px 2px rgba(14, 17, 22, 0.04);
  --shadow-md:  0 4px 12px rgba(14, 17, 22, 0.08), 0 2px 4px rgba(14, 17, 22, 0.05);
  --shadow-lg:  0 12px 28px rgba(14, 17, 22, 0.10), 0 4px 8px rgba(14, 17, 22, 0.05);
  --shadow-xl:  0 24px 56px rgba(14, 17, 22, 0.14), 0 8px 16px rgba(14, 17, 22, 0.06);
  --shadow-blue:  0 8px 24px rgba(31, 124, 210, 0.28);
  --shadow-green: 0 8px 24px rgba(46, 158, 84, 0.26);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-snap:     cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ─── Layout helpers ──────────────────────────────────────────── */
  --nav-height: 68px;
}