/* =========================================================
   Knal Design System — Tokens
   Source of truth for color, type, spacing, radius, shadow.
   Phase 1.1 — v1.0
   ========================================================= */

/* --- Webfont imports (Google Fonts, no licensing cost) --- */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ===== COLOR — primary "Knal Rouge" ===== */
  --knal-red:        #FF2E2E;   /* primary "claquement" */
  --knal-red-dark:   #C81E1E;   /* hover / active / WCAG AA text on white */
  --knal-red-light:  #FFE5E5;   /* soft backgrounds, fills */
  --knal-red-pop:    #FF2E2E40; /* 25% — focus rings, glow */

  /* Brand-friendly aliases */
  --color-primary:        var(--knal-red);
  --color-primary-dark:   var(--knal-red-dark);
  --color-primary-light:  var(--knal-red-light);

  /* ===== COLOR — neutrals (ink scale) ===== */
  --ink-900: #0F0F11;   /* main text, dark surfaces */
  --ink-800: #1F2024;   /* dark surface 2 */
  --ink-700: #383A40;   /* dark secondary text */
  --ink-500: #71757F;   /* secondary text / placeholders */
  --ink-300: #D4D6DC;   /* borders, dividers */
  --ink-100: #F2F3F5;   /* subtle bg */
  --ink-50:  #F9FAFB;   /* softest bg */
  --white:   #FFFFFF;

  /* ===== COLOR — semantic ===== */
  --color-success: #10B97D;
  --color-warning: #F5A524;
  --color-error:   #DC2626;   /* DISTINCT from --knal-red on purpose */
  --color-info:    #2563EB;

  /* ===== COLOR — sector accents (overrides) ===== */
  --accent-coiffeur:  #F5E6D3;  /* beige doux */
  --accent-plombier:  #1F4D7A;  /* bleu travail */
  --accent-securite:  #FFD700;  /* jaune badge */
  --accent-commerce:  #6B8E4E;  /* vert saisonnier */
  --accent-batiment:  #E8B82C;  /* jaune ouvrier */

  /* ===== COLOR — semantic application ===== */
  --bg:                var(--white);
  --bg-subtle:         var(--ink-50);
  --bg-muted:          var(--ink-100);
  --bg-inverse:        var(--ink-900);
  --fg:                var(--ink-900);
  --fg-muted:          var(--ink-700);
  --fg-subtle:         var(--ink-500);
  --fg-inverse:        var(--white);
  --border:            var(--ink-300);
  --border-strong:     var(--ink-500);

  /* ===== TYPOGRAPHY — families ===== */
  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ===== TYPOGRAPHY — semantic scale (desktop) ===== */
  --fs-h1:        72px;  --lh-h1: 1.05;  --ls-h1: -0.02em;  --fw-h1: 700;
  --fs-h2:        48px;  --lh-h2: 1.10;  --ls-h2: -0.01em;  --fw-h2: 700;
  --fs-h3:        32px;  --lh-h3: 1.20;  --ls-h3:  0;       --fw-h3: 600;
  --fs-h4:        24px;  --lh-h4: 1.25;  --ls-h4:  0;       --fw-h4: 600;
  --fs-body-lg:   20px;  --lh-body-lg: 1.6;  --fw-body: 400;
  --fs-body:      16px;  --lh-body:    1.6;
  --fs-body-sm:   14px;  --lh-body-sm: 1.5;
  --fs-caption:   13px;  --lh-caption: 1.4;  --fw-caption: 500;
  --fs-button:    16px;  --lh-button:  1.0;  --fw-button:  600;
  --fs-price:     64px;  --lh-price:   1.0;  --fw-price:   800;

  /* ===== SPACING (4px base) ===== */
  --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;

  --section-py-desktop: 112px;
  --section-py-mobile:  56px;
  --container-max:      1280px;
  --container-px:       24px;

  /* ===== RADIUS — mixed philosophy ===== */
  --radius-none: 0;
  --radius-sm:   6px;    /* buttons, inputs, badges */
  --radius-md:   12px;   /* cards, modals */
  --radius-lg:   24px;   /* hero surfaces */
  --radius-full: 9999px; /* pills, avatars */

  /* ===== ELEVATION ===== */
  --shadow-none:    none;
  --shadow-subtle:  0 1px 2px rgba(15, 15, 17, 0.04);
  --shadow-default: 0 4px 16px rgba(15, 15, 17, 0.08);
  --shadow-raised:  0 12px 32px rgba(15, 15, 17, 0.12);
  --shadow-pop:     0 8px 24px rgba(255, 46, 46, 0.24);  /* primary CTA glow */

  /* ===== BORDERS ===== */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* ===== MOTION ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snappy:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ===== FOCUS ===== */
  --focus-ring: 0 0 0 3px var(--knal-red-pop);
}

/* Mobile type adjustments (≤ 768px) */
@media (max-width: 768px) {
  :root {
    --fs-h1: 44px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-price: 48px;
  }
}

/* =========================================================
   SEMANTIC ELEMENT STYLES — drop-in defaults
   ========================================================= */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--fg);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-h1);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size:   var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
  margin: 0;
}

p, .body {
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--knal-red);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-caption);
  color: var(--fg-subtle);
}

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

.price {
  font-family: var(--font-display);
  font-size: var(--fs-price);
  line-height: var(--lh-price);
  font-weight: var(--fw-price);
  letter-spacing: -0.02em;
}

a { color: var(--knal-red-dark); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--knal-red); color: var(--white); }