/* ============================================================================
   MSCV SA — Design System Tokens · "Engineered Flow"
   Swiss engineering precision, warmed by the flow of water, air, and heat.
   Source of truth. Consumed by Tailwind preset + all component previews.
   ============================================================================ */

:root {
  /* --- Brand (locked — derived from the logo) --------------------------- */
  --mscv-blue:        #159BD7;  /* primary brand — calm expertise */
  --mscv-cyan:        #2BB5E8;  /* cool accent, gradient start (water/air) */
  --mscv-blue-deep:   #1C75BC;  /* depth, gradient cool-end */
  --mscv-orange:      #F7931E;  /* URGENCY + CTA ONLY (heat/action) — fills only */
  --mscv-orange-text: #B25E00;  /* orange as TEXT on paper (AA ≥4.5:1) */
  --mscv-yellow:      #FBB040;  /* warm gradient partner */
  --mscv-red:         #B11E2F;  /* alert / true emergency only */

  /* --- Temperature spectrum (signature — cold problem → warm comfort) ---- */
  --mscv-temp-cold:   #2BB5E8;
  --mscv-temp-cool:   #1C75BC;
  --mscv-temp-warm:   #F7931E;
  --mscv-temp-hot:    #FBB040;
  --grad-temperature: linear-gradient(100deg, var(--mscv-cyan) 0%, var(--mscv-blue-deep) 42%, var(--mscv-orange) 100%);
  --grad-cool:        linear-gradient(135deg, var(--mscv-cyan) 0%, var(--mscv-blue-deep) 100%);
  --grad-warm:        linear-gradient(135deg, var(--mscv-yellow) 0%, var(--mscv-orange) 100%);

  /* --- Neutral scale (the crafted spine Federico lacked) ---------------- */
  --ink-900: #17181B;   /* deepest — dark sections, footer */
  --ink-800: #1F2024;
  --ink-700: #2D2E32;   /* brand charcoal — headings on light */
  --ink-600: #43454B;
  --ink-500: #62656D;   /* secondary text */
  --ink-400: #8B8E97;   /* muted, captions */
  --ink-300: #B9BCC4;
  --ink-200: #DBDDE2;   /* hairline borders on light */
  --ink-100: #ECEDF0;
  --paper-50: #FAF9F6;  /* warm paper — primary light surface */
  --paper-0:  #FFFFFF;
  --paper-raised: #FFFFFF;

  /* On-dark surfaces */
  --surface-dark:      #17181B;
  --surface-dark-2:    #202126;
  --hairline-dark:     rgba(255,255,255,0.10);
  --hairline-light:    rgba(23,24,27,0.10);

  /* --- Semantic roles --------------------------------------------------- */
  --color-bg:          var(--paper-50);
  --color-surface:     var(--paper-0);
  --color-text:        var(--ink-700);
  --color-text-soft:   var(--ink-500);
  --color-text-muted:  var(--ink-400);
  --color-heading:     var(--ink-900);
  --color-brand:       var(--mscv-blue);
  --color-action:      var(--mscv-orange);   /* CTA / urgency ONLY */
  --color-border:      var(--ink-200);

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;  /* engineered */
  --font-body:    'Instrument Sans', 'Segoe UI', system-ui, sans-serif; /* warm humanist */
  --font-mono:    'Space Mono', ui-monospace, monospace; /* technical data */

  /* Modular scale — 1.25 (major third) */
  --text-xs:   0.75rem;    /* 12 — mono labels */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1.0625rem;  /* 17 — body, legible for older readers */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.9375rem;  /* 31 — H3 */
  --text-3xl:  2.4375rem;  /* 39 — H2 */
  --text-4xl:  3.0625rem;  /* 49 — H1 */
  --text-5xl:  3.8125rem;  /* 61 — display */
  --text-6xl:  4.75rem;    /* 76 — hero display */

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.6;
  --tracking-tight:  -0.02em;
  --tracking-label:  0.14em;   /* mono eyebrow labels, uppercased */

  /* --- Spacing (8px base) ----------------------------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;  --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-20: 5rem;   --space-24: 6rem;   --space-32: 8rem;
  --section-y: clamp(4rem, 8vw, 8rem);
  --container:  1200px;
  --container-tight: 960px;

  /* --- Radius (engineered — tight, precise) ----------------------------- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Elevation (soft, cool-tinted — not default gray) ----------------- */
  --shadow-sm: 0 1px 2px rgba(23,24,27,0.06), 0 1px 3px rgba(23,24,27,0.04);
  --shadow-md: 0 4px 12px rgba(23,24,27,0.08), 0 2px 4px rgba(23,24,27,0.04);
  --shadow-lg: 0 12px 32px rgba(23,24,27,0.12), 0 4px 8px rgba(23,24,27,0.05);
  --shadow-brand: 0 12px 28px rgba(21,155,215,0.22);
  --shadow-action: 0 10px 24px rgba(247,147,30,0.26);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-draw: 1200ms;
}