/* =========================================================================
   La Primeur — colors_and_type.css
   Single source of truth for colour + typography tokens.

   Usage:  <link rel="stylesheet" href="/colors_and_type.css">
   Import Inter Display from Google Fonts at the top of any HTML file:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet"
           href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">

   ⚠️ Font substitution: Inter is a free Google Fonts stand-in for Söhne /
   General Sans. Swap the family name when a foundry license is acquired.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------
     COLOUR — PRIMARY PALETTE (L'Aube)
     The default brand expression. Website, plaquette, email, social.
     ----------------------------------------------------------------- */
  --sage-900:       #354234;
  --sage-800:       #506048;
  --sage-700:       #647a5a;
  --sage-600:       #7A9471;  /* primary action, marks, keylines */
  --sage-500:       #94a98a;
  --sage-300:       #c3d1bb;
  --sage-100:       #e5ebe0;
  --sage-50:        #f1f4ee;

  --cream-50:       #F4EFE6;  /* default page background */
  --cream-100:      #ede7db;
  --cream-200:      #e0d8c6;

  --terracotta-700: #9a5f3f;
  --terracotta-500: #C87F5A;  /* single accent */
  --terracotta-300: #e0aa8c;
  --terracotta-100: #f2dccf;

  --ink-900:        #1F2B1E;  /* body text */
  --ink-700:        #3a4638;
  --ink-500:        #5B6355;  /* muted, captions */
  --ink-300:        #8c9186;
  --ink-100:        #d4d6cf;

  /* -----------------------------------------------------------------
     COLOUR — SECONDARY PALETTE (Le Point)
     Dark / formal. Dossier PDF, contracts, corps de courrier formel.
     ----------------------------------------------------------------- */
  --forest-900:     #1F3B2A;
  --forest-700:     #2f5540;
  --ivory-50:       #F2EDE3;
  --ocre-500:       #B8442E;

  /* -----------------------------------------------------------------
     COLOUR — ACCENT PALETTE (Le Flux)
     Technical only — spec sheets, tech diagrams.
     ----------------------------------------------------------------- */
  --petrol-900:     #0E3A4A;
  --petrol-700:     #1d5568;
  --leaf-500:       #5FA876;
  --bone-50:        #FAFAF5;

  /* -----------------------------------------------------------------
     SEMANTIC COLOUR TOKENS
     Always reference these in components, not the palette directly.
     ----------------------------------------------------------------- */
  --bg:             var(--cream-50);
  --bg-raised:      #ffffff;           /* cards on cream */
  --bg-sunken:      var(--cream-100);  /* inset panels, input fills */

  --fg:             var(--ink-900);
  --fg-muted:       var(--ink-500);
  --fg-subtle:      var(--ink-300);
  --fg-inverse:     var(--cream-50);

  --accent:         var(--sage-600);
  --accent-hover:   var(--sage-700);
  --accent-fg:      var(--cream-50);
  --highlight:      var(--terracotta-500);

  --border:         rgba(31, 43, 30, 0.08);  /* ink-900 @ 8% */
  --border-strong:  rgba(31, 43, 30, 0.16);
  --border-accent:  var(--sage-600);

  --success:        var(--sage-600);
  --warning:        var(--terracotta-500);
  --danger:         var(--ocre-500);

  /* -----------------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     ----------------------------------------------------------------- */
  --font-display:   'Inter', 'Inter Display', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', sans-serif;
  --font-body:      var(--font-display);
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* -----------------------------------------------------------------
     TYPOGRAPHY — SIZE SCALE (modular, 1.250 / major third)
     ----------------------------------------------------------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   84px;

  /* Line heights — tighter on display, generous on body */
  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.55;
  --lh-tight:   1.35;

  /* Letter spacing */
  --tracking-wordmark: 0.17em;   /* LA PRIMEUR wordmark */
  --tracking-eyebrow:  0.12em;   /* small caps labels */
  --tracking-display:  -0.02em;  /* big headlines */
  --tracking-body:     0;

  /* Font weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* -----------------------------------------------------------------
     SPACING — 4px base, 9 steps
     ----------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  72px;
  --space-9:  96px;

  /* -----------------------------------------------------------------
     RADII, SHADOWS, MOTION
     ----------------------------------------------------------------- */
  --radius-sharp:  2px;
  --radius-card:   4px;
  --radius-pill:   999px;

  --shadow-sm:     0 1px 2px rgba(31, 43, 30, 0.06);
  --shadow-md:     0 2px 8px rgba(31, 43, 30, 0.08);

  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:     160ms;
  --dur-base:      320ms;

  /* -----------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------- */
  --measure-body:   68ch;
  --container-max:  1200px;
  --container-pad:  var(--space-5);
}

/* ==========================================================================
   BASE RESETS + SEMANTIC TYPE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

/* ---- Semantic type roles -------------------------------------------------- */

.lp-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--fg);
}

.lp-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

h1, .lp-h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 5vw, var(--fs-5xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .lp-h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .lp-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

p, .lp-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  max-width: var(--measure-body);
}

.lp-lead {
  font-size: var(--fs-md);
  color: var(--fg);
  line-height: var(--lh-tight);
  max-width: 54ch;
}

.lp-caption {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: var(--lh-tight);
}

.lp-stat {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.lp-code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sharp);
  color: var(--ink-700);
}

/* ---- Links ---------------------------------------------------------------- */
a {
  color: var(--fg);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }

/* ---- Dark territory helper (Le Point) ------------------------------------- */
.lp-dark {
  --bg: var(--forest-900);
  --bg-raised: var(--forest-700);
  --bg-sunken: #16291e;
  --fg: var(--ivory-50);
  --fg-muted: rgba(242, 237, 227, 0.68);
  --fg-subtle: rgba(242, 237, 227, 0.4);
  --accent: var(--ocre-500);
  --accent-hover: var(--terracotta-700);
  --border: rgba(242, 237, 227, 0.14);
  --border-strong: rgba(242, 237, 227, 0.28);
}