/* ============================================================================
   Evolve — Design Tokens
   Startup studio ConTech & PropTech · La Réunion · filiale Alvéoles
   Orange-led variant of the Alvéoles system (same symbol + Prodigy Sans).
   Production build — WOFF2 locales, réglages figés.
   ============================================================================ */

/* ---- Brand typeface: Prodigy Sans (propriétaire, ne pas redistribuer) ----- */
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Prodigy Sans";
  src: url("../fonts/ProdigySans-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ====================================================================
     COLORS — Evolve: warm, energetic, La Réunion-rooted
     Orange leads; deep brun anchors; green is the Alvéoles heritage accent.
     ==================================================================== */

  /* Primary — ~80% of every layout */
  --ev-orange:     #F67F44;        /* Signature orange (Orange Volcanique) */
  --ev-orange-vif: #FF8A4D;        /* Brighter sibling for highlights */
  --ev-terre:      #B5451B;        /* Deep burnt orange — text/hover on light */
  --ev-brun:       #2E160C;        /* Deep warm anchor (inverse surfaces) */
  --ev-blanc:      #FFFAF5;        /* Warm white (pulls toward orange) */

  /* Secondary — small touches only */
  --ev-vert:          #009E71;     /* Heritage green — link to parent Alvéoles */
  --ev-bleu-cascade:  #7FD2BE;
  --ev-jaune-savane:  #FBE991;
  --ev-noir-sable:    #1A0F0A;     /* Warm near-black */

  /* Tints — Orange */
  --ev-orange-100: #FEE8D6;
  --ev-orange-300: #F9AB78;

  /* Vert héritage en petit texte (AA : 5.8:1 sur blanc) */
  --ev-vert-text: #00714F;

  /* Tints — Vert (heritage) */
  --ev-vert-100: #DDFCED;
  --ev-vert-300: #66C9A6;

  /* Tints — Bleu Cascade */
  --ev-bleu-cascade-100: #D5F2EA;
  --ev-bleu-cascade-400: #4CB59E;

  /* Tints — Jaune Savane */
  --ev-jaune-savane-100: #FDF4C8;
  --ev-jaune-savane-300: #F9D650;

  /* ====================================================================
     SEMANTIC COLOR ALIASES
     ==================================================================== */
  --bg:            var(--ev-blanc);
  --bg-inverse:    var(--ev-brun);
  --bg-brand:      var(--ev-orange);
  --bg-soft:       var(--ev-orange-100);

  --fg1:           var(--ev-brun);          /* Primary text */
  --fg2:           #6B4A3A;                  /* Secondary text */
  --fg3:           #7E6051;                  /* Tertiary / meta */
  --fg-on-brand:   var(--ev-blanc);
  --fg-on-dark:    var(--ev-blanc);

  --accent:        var(--ev-vert);          /* Green heritage pop */
  --accent-warm:   var(--ev-jaune-savane);
  --accent-cool:   var(--ev-bleu-cascade);

  --border:        rgba(46, 22, 12, 0.10);
  --border-strong: rgba(46, 22, 12, 0.20);

  /* Orange lisible pour petit texte sur fond clair (AA : 4.6:1) */
  --ev-orange-text: #C24E1E;

  /* Réglage figé (handoff) : accent de la porte partenaire = terre */
  --porte-accent:  var(--ev-terre);

  /* ====================================================================
     TYPOGRAPHY
     - Prodigy Sans = bespoke brand face (loaded via @font-face above)
     - Aptos        = official system fallback (per guidelines, p.32)
     ==================================================================== */
  --font-brand: "Prodigy Sans", "Aptos", system-ui, sans-serif;
  --font-body:  "Prodigy Sans", "Aptos", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;

  /* Type scale (8-pt rhythm, 1.25 ratio softened) */
  --t-display: 96px;   /* Hero / section dividers */
  --t-h1: 64px;
  --t-h2: 48px;
  --t-h3: 32px;
  --t-h4: 24px;
  --t-body-lg: 20px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 12px;

  /* Line-height multipliers (per guidelines p.31)
     Titles & subtitles: 1.1 · Body: 1.2 */
  --lh-title: 1.1;
  --lh-body:  1.2;
  --lh-prose: 1.5;     /* longer reading passages */

  /* Tracking */
  --tr-tight:  -0.02em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-caps:   0.08em;

  /* ====================================================================
     SPACING — 8-pt grid
     ==================================================================== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ====================================================================
     RADII — humanistic, generous
     ==================================================================== */
  --r-sm: 8px;
  --r-md: 12px;     /* default cards */
  --r-lg: 16px;
  --r-xl: 24px;     /* hero cards */
  --r-2xl: 32px;
  --r-pill: 999px;  /* buttons, tags */

  /* ====================================================================
     SHADOWS — extremely subtle, never neon
     ==================================================================== */
  --sh-1: 0 1px 2px rgba(74,30,14,0.08);
  --sh-2: 0 4px 12px rgba(74,30,14,0.10);
  --sh-3: 0 8px 24px rgba(74,30,14,0.12);
  --sh-4: 0 16px 40px rgba(74,30,14,0.14);

  /* ====================================================================
     MOTION — soft, organic, never bouncy
     ==================================================================== */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
}

/* ============================================================================
   BASE TYPOGRAPHY
   ============================================================================ */
html, body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
  font-family: var(--font-brand);
  color: inherit;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-title);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--t-h1); font-weight: var(--w-semibold); }
h2, .h2 { font-size: var(--t-h2); font-weight: var(--w-semibold); }
h3, .h3 { font-size: var(--t-h3); font-weight: var(--w-bold); }
h4, .h4 { font-size: var(--t-h4); font-weight: var(--w-bold); }

.display {
  font-family: var(--font-brand);
  font-size: var(--t-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-title);
  letter-spacing: -0.025em;
}

p, .p {
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-prose);
  color: var(--fg1);
}

.small  { font-size: var(--t-small); }
.micro  { font-size: var(--t-micro); }

/* .eyebrow : défini dans styles.css (chargé après) — une seule source de vérité. */

.numeral {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

a {
  color: var(--ev-terre);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--ev-orange); text-decoration: underline; }

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

/* ============================================================================
   GRAIN — recommended on color fills (per guidelines p.27)
   Apply via class .grain on any colored surface.
   ============================================================================ */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  z-index: 1;
}
.grain > * { position: relative; z-index: 2; }