/* ============================================================
   2M PAYSAGE — Colors & Type
   Source: 2M paysage dossier logo.pdf (charte graphique)
   ============================================================ */

/* -------- Webfonts --------
   Lucidity Condensed (titles) — NOT on Google Fonts.
   Substituted with `Anton` as the closest Google Fonts match
   (heavy condensed sans, slightly rounded terminals). FLAG: please
   provide a Lucidity Condensed Bold .ttf/.woff for production.

   Questrial (body) — available on Google Fonts, dropped in directly.
*/
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Questrial&display=swap");

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  /* Inspired by Provence, olive fields and tennis-court green. */
  --c-white:        #ffffff;
  --c-cream:        #fffae6;   /* warm off-white, default surface */
  --c-sapin:        #0e3b26;   /* deep forest, near-black — authority */

  /* ---------- SECONDARY PALETTE ---------- */
  /* Complementary olive-greens, plus two rosy/pop accents. */
  --c-rosy:         #f9f1e8;   /* dusty cream-rose, soft surface */
  --c-rose:         #ea2283;   /* magenta accent */
  --c-vert-fluo:    #b8de11;   /* anise / fluo lime accent */
  --c-orange:       #f36b3d;   /* clay-orange accent */

  /* ---------- DERIVED / WORKING TOKENS ---------- */
  --c-sapin-80:     rgba(14, 59, 38, 0.80);
  --c-sapin-60:     rgba(14, 59, 38, 0.60);
  --c-sapin-40:     rgba(14, 59, 38, 0.40);
  --c-sapin-15:     rgba(14, 59, 38, 0.15);
  --c-sapin-08:     rgba(14, 59, 38, 0.08);

  /* The pale lime outline that appears in the logo composition. */
  --c-vert-pale:    #e2f0a7;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg:             var(--c-cream);
  --bg-soft:        var(--c-rosy);
  --bg-inverse:     var(--c-sapin);

  --fg:             var(--c-sapin);
  --fg-muted:       var(--c-sapin-60);
  --fg-inverse:     var(--c-cream);

  --border:         var(--c-sapin-15);
  --border-strong:  var(--c-sapin);

  --accent:         var(--c-vert-fluo);
  --accent-warm:    var(--c-orange);
  --accent-pop:     var(--c-rose);

  /* ---------- TYPOGRAPHY FAMILIES ---------- */
  --font-display:   "Anton", "Lucidity Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:      "Questrial", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;

  /* ---------- TYPE SCALE (fluid-ish, 1.250 ratio) ---------- */
  --fs-display:     clamp(64px, 9vw, 144px);
  --fs-h1:          clamp(44px, 6vw, 88px);
  --fs-h2:          clamp(32px, 4vw, 56px);
  --fs-h3:          24px;
  --fs-eyebrow:     13px;     /* small caps tag above titles */
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-small:       14px;
  --fs-caption:     12px;

  /* ---------- SPACING (8pt + half steps) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  /* The brand leans hard-edged + sculptural. Radii are subtle, or
     pill for buttons/tags. No medium "soft card" radii. */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   6px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-hair:   1px;
  --bw-rule:   1.5px;   /* the eyebrow underline / divider rule */
  --bw-strong: 2px;

  /* ---------- ELEVATION ----------
     Charte interdits: "NE PAS ajouter d'ombres ou d'effets".
     Shadows are reserved for interactive overlays ONLY (menus, modals).
     Resting cards use borders, not shadows. */
  --shadow-none:  none;
  --shadow-menu:  0 12px 32px -12px rgba(14, 59, 38, 0.25);
  --shadow-modal: 0 24px 64px -16px rgba(14, 59, 38, 0.35);

  /* ---------- MOTION ---------- */
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Lucidity Condensed (→ Anton) is BOLD ONLY — never thinner.
   Questrial is REGULAR ONLY — never bolded. Hierarchy is built
   with size/color/family swaps, not weight.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size:   var(--fs-body);
  line-height: 1.55;
  color:       var(--fg);
  background:  var(--bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.display,
.h1, .h2, .h3,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;          /* Anton ships at 400; reads as bold */
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); letter-spacing: -0.01em; }
h1, .h1  { font-size: var(--fs-h1); }
h2, .h2  { font-size: var(--fs-h2); }
h3, .h3  { font-size: var(--fs-h3); letter-spacing: 0.02em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: var(--bw-rule);
  background: currentColor;
}

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

.body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.small   { font-size: var(--fs-small); }
.caption { font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--fg-muted); }

a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-warm); }

::selection { background: var(--c-vert-fluo); color: var(--c-sapin); }