/* =========================================================
   Hask Design System — Foundations
   Palette claire dominante · vert sauge · gris anthracite · orange terracotta
   Ton professionnel, impactant, épuré.
   ========================================================= */

/* Webfont: Nunito Sans as closest Google-Fonts match to the Hask wordmark
   (geometric-humanist sans with open apertures and subtle flare).
   FLAG: a bespoke type file was not provided — substitute pending confirmation. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
/* Optional families for the Tweaks panel font swap */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Playfair+Display:wght@400;600;700&family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --hask-sage:        #8BBD9F;  /* vert sauge — couleur principale chaude */
  --hask-sage-600:    #6FA586;  /* vert plus foncé — états actifs, textes sur fond clair */
  --hask-sage-700:    #527F68;
  --hask-sage-300:    #AFD3BD;  /* vert plus clair — hovers, accents doux */
  --hask-sage-100:    #E3F0E8;  /* vert très clair — surfaces, highlights */
  --hask-sage-50:     #F3F9F5;  /* tint wash — backgrounds de section */

  --hask-ink:         #323232;  /* gris anthracite — texte principal, couleur principale froide */
  --hask-ink-800:     #1F1F1F;  /* presque noir — titres d'impact */
  --hask-ink-600:     #525252;  /* texte secondaire */
  --hask-ink-500:     #6E6E6E;  /* texte tertiaire, meta */
  --hask-ink-400:     #9A9A9A;  /* placeholder, disabled */
  --hask-ink-300:     #C8C8C8;  /* dividers forts */
  --hask-ink-200:     #E4E4E4;  /* borders */
  --hask-ink-100:     #F1F1F1;  /* surfaces alt */
  --hask-ink-50:      #F7F7F7;  /* subtle background */

  --hask-terracotta:     #DB9878;  /* orange doux — couleur secondaire d'accent */
  --hask-terracotta-600: #C17E5E;
  --hask-terracotta-300: #ECBFA9;
  --hask-terracotta-100: #F8E7DB;

  /* ---------- SEMANTIC ---------- */
  --color-bg:           #FFFFFF;
  --color-bg-alt:       var(--hask-ink-50);
  --color-bg-section:   var(--hask-sage-50);
  --color-bg-ink:       var(--hask-ink);      /* dark inverted sections */

  --color-fg:           var(--hask-ink);      /* body */
  --color-fg-strong:    var(--hask-ink-800);  /* headings */
  --color-fg-muted:     var(--hask-ink-600);
  --color-fg-subtle:    var(--hask-ink-500);
  --color-fg-disabled:  var(--hask-ink-400);
  --color-fg-inverse:   #FFFFFF;

  --color-border:       var(--hask-ink-200);
  --color-border-strong:var(--hask-ink-300);
  --color-divider:      var(--hask-ink-100);

  --color-accent:          var(--hask-sage);
  --color-accent-strong:   var(--hask-sage-600);
  --color-accent-soft:     var(--hask-sage-100);
  --color-accent-wash:     var(--hask-sage-50);

  --color-accent-2:        var(--hask-terracotta);
  --color-accent-2-strong: var(--hask-terracotta-600);
  --color-accent-2-soft:   var(--hask-terracotta-100);

  --color-success: var(--hask-sage-600);
  --color-warning: #E4A32B;
  --color-danger:  #C85A4A;

  /* ---------- TYPE ---------- */
  --font-sans:    'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Fluid type — professionel, clair, impactant */
  --text-display:  clamp(3rem,   2.2rem + 4vw,    5.5rem); /* hero 48–88px */
  --text-h1:       clamp(2.25rem,1.8rem  + 2.2vw, 3.25rem);
  --text-h2:       clamp(1.75rem,1.5rem  + 1.2vw, 2.25rem);
  --text-h3:       clamp(1.375rem,1.25rem+ 0.5vw, 1.625rem);
  --text-h4:       1.125rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.9375rem;
  --text-caption:  0.8125rem;
  --text-micro:    0.6875rem;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-normal:     1.45;
  --lh-relaxed:    1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em; /* small caps labels */

  /* ---------- SPACE / RADIUS / SHADOW ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(50,50,50,0.06);
  --shadow-sm: 0 2px 6px rgba(50,50,50,0.06), 0 1px 2px rgba(50,50,50,0.04);
  --shadow-md: 0 6px 20px rgba(50,50,50,0.08), 0 2px 4px rgba(50,50,50,0.04);
  --shadow-lg: 0 16px 40px rgba(50,50,50,0.10), 0 4px 10px rgba(50,50,50,0.05);
  --shadow-ring: 0 0 0 3px rgba(139,189,159,0.35); /* sage focus ring */

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --gutter: clamp(16px, 3vw, 40px);
}

/* =========================================================
   Element defaults — semantic shorthands
   ========================================================= */

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-fg-strong);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: var(--fw-bold);     line-height: var(--lh-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-semibold); }

.display {
  font-size: var(--text-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}

p {
  margin: 0 0 var(--space-4);
  max-width: 68ch;
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent-strong);
}

.lead {
  font-size: var(--text-body-lg);
  color: var(--color-fg-muted);
  line-height: var(--lh-relaxed);
}

small, .caption {
  font-size: var(--text-caption);
  color: var(--color-fg-muted);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--color-accent-strong);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--hask-sage-700); text-decoration: underline; }

hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: var(--space-8) 0;
}

::selection { background: var(--hask-sage-100); color: var(--hask-ink-800); }

/* focus ring — sage, subtle */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--radius-sm);
}