/* ============================================================
   VINCENT MORIN — DESIGN SYSTEM
   Theme: Aventure / Randonnée / Nature — "carnet de voyage"
   ============================================================ */

/* ---------- POLICES ---------- */
/* Auto-hébergées en woff2. Avant : deux @import vers fonts.cdnfonts.com
   imbriqués dans un @import depuis styles.css — soit une cascade de 3 requêtes
   bloquantes en série avant le moindre pixel, plus 7 @font-face pointant vers
   un dossier fonts/ qui n'existait pas (7 x 404 à chaque visite).
   Maintenant : même origine, format woff2 (~30 % plus léger que woff) et
   font-display:swap pour que le texte s'affiche tout de suite. */
@font-face{
  font-family:"Druk Trial";
  src:url("fonts/Druk-Heavy.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  /* les <em> des titres display (.vm-section-title em, .vpl-head-title em…)
     demandent l'italique en poids 400 */
  font-family:"Druk Trial";
  src:url("fonts/Druk-MediumItalic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("fonts/CabinetGrotesk-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("fonts/CabinetGrotesk-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("fonts/CabinetGrotesk-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("fonts/CabinetGrotesk-Extrabold.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cabinet Grotesk";
  src:url("fonts/CabinetGrotesk-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}

:root {
  /* ====== COLOR — RAW PALETTE ====== */
  /* Papers (light backgrounds, "carnet de voyage") */
  --paper-cream:        #F8F4F0;   /* main paper */
  --paper-kraft:        #EFE7DB;   /* warm kraft */
  --paper-edge:         #E6DCCB;   /* slightly darker paper edge */

  /* Forest (dark backgrounds & primary text on light) */
  --forest:             #283A2A;   /* primary forest green */
  --forest-deep:        #1D2027;   /* near-black, deep forest at night */
  --forest-soft:        #3B5240;   /* lighter accent of forest */

  /* Accents */
  --terracotta:         #B85C2F;   /* stamps, milestones, hot accent */
  --terracotta-deep:    #8E4422;   /* pressed / hover */
  --terracotta-soft:    #D88A5F;   /* highlight */

  /* Functional */
  --ink:                #283A2A;   /* body text on cream */
  --ink-soft:           rgba(40, 58, 42, 0.7);
  --ink-mute:           rgba(40, 58, 42, 0.45);
  --ink-line:           rgba(40, 58, 42, 0.2);

  --white:              #FFFFFF;
  --black:              #000000;

  /* ====== SEMANTIC TOKENS ====== */
  /* Backgrounds */
  --bg-paper:           var(--paper-cream);
  --bg-paper-warm:      var(--paper-kraft);
  --bg-forest:          var(--forest);
  --bg-night:           var(--forest-deep);
  --bg-card:            #FFFFFF;        /* polaroid white */

  /* Foregrounds */
  --fg-1:               var(--forest);   /* primary text on paper */
  --fg-2:               var(--ink-soft); /* secondary */
  --fg-3:               var(--ink-mute); /* tertiary / labels */
  --fg-on-dark:         var(--paper-cream); /* primary text on forest/night */
  --fg-on-dark-2:       rgba(248, 244, 240, 0.7);

  /* Accent */
  --accent:             var(--terracotta);
  --accent-pressed:     var(--terracotta-deep);
  --accent-soft:        var(--terracotta-soft);

  /* Lines / dividers (always dashed in this system) */
  --line:               var(--ink-line);
  --line-on-dark:       rgba(248, 244, 240, 0.3);

  /* ====== TYPE — FAMILIES ====== */
  --font-display:       "Druk Trial", "Arial Black", "Helvetica Neue", Impact, sans-serif;
    --font-body:          "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:          ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ====== TYPE — SCALE (semantic) ====== */
  /* Display: huge "carnet" titles, designed to nearly fill the viewport */
  --t-display-1:        clamp(60px, 15vw, 253px);  /* hero H1 */
  --t-display-2:        clamp(60px, 12vw, 200px);  /* section openers */
  --t-display-3:        clamp(48px, 8vw, 140px);   /* sub display */

  /* Headings on cards / panels */
  --t-h1:               48px;
  --t-h2:               32px;
  --t-h3:               24px;
  --t-h4:               20px;

  /* Body */
  --t-body-lg:          18px;
  --t-body:             16px;
  --t-body-sm:          14px;
  --t-caption:          12px;

  /* "Marquee / overline" — uppercase tracked labels (KM 01, FIN DU SENTIER…) */
  --t-overline:         13px;

  /* Line heights */
  --lh-tight:           1.05;     /* display */
  --lh-snug:            1.2;      /* headings */
  --lh-normal:          1.5;      /* body */

  /* Letter spacing */
  --ls-tight:           -0.02em;
  --ls-normal:          0;
  --ls-wide:            0.08em;
  --ls-wider:           0.16em;   /* overlines, milestones */

  /* ====== SPACING ====== */
  --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 ====== */
  --r-none:  0px;
  --r-sm:    3px;     /* polaroid corners */
  --r-md:    8px;
  --r-lg:    12px;    /* panels (textMoi) */
  --r-pill:  999px;   /* milestone chips */

  /* ====== SHADOWS — physical "paper on table" ====== */
  --sh-paper:       0 4px 15px rgba(0, 0, 0, 0.18);                /* light card */
  --sh-paper-lift:  0 10px 25px rgba(40, 58, 42, 0.20);            /* hover */
  --sh-polaroid:    0 8px 20px rgba(0, 0, 0, 0.55);                /* heavy polaroid */
  --sh-polaroid-h:  0 15px 35px rgba(0, 0, 0, 0.30);               /* polaroid hover */
  --sh-soft:        0 8px 25px rgba(40, 58, 42, 0.10);             /* glassy panel */
  --sh-inset:       inset 0 0 20px rgba(0, 0, 0, 0.08);            /* paper grain */

  /* ====== ROTATIONS — nothing is perfectly straight ====== */
  --rot-1: -1deg;
  --rot-2: -2deg;
  --rot-4: -4deg;
  --rot-1p: 1deg;
  --rot-2p: 2deg;

  /* ====== ANIMATION ====== */
  --ease-out:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-stamp:      cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --d-fast:          0.2s;
  --d-base:          0.4s;
  --d-slow:          0.8s;

  /* ====== LAYOUT ====== */
  --container-max:   1440px;
  --gutter:          5%;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

body {
  background-color: var(--bg-paper);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1 { font-size: var(--t-display-1); text-transform: uppercase; }
h2 { font-size: var(--t-display-3); text-transform: uppercase; }
h3 { font-size: var(--t-h1); text-transform: uppercase; }
h4 { font-size: var(--t-h2); text-transform: uppercase; }
h5 { font-size: var(--t-h3); }

p  { font-size: var(--t-body); line-height: var(--lh-normal); margin: 0 0 var(--sp-4); }

a  {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;     /* signature: dashed underlines */
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color var(--d-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

hr {
  border: 0;
  border-top: 1.5px dashed var(--line);
  margin: var(--sp-6) 0;
}

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