/* =========================================================
   A-FRAME CANADA — Design system (tokens)
   Tout le site utilise UNIQUEMENT ces variables.
   ========================================================= */
:root{
  /* --- Couleurs de marque --- */
  --noir:#111111;      /* Noir charbon */
  --epinette:#4A6457;  /* Épinette (couleur du logo) */
  --sauge:#A9B8A8;     /* Sauge */
  --cedre:#B46A3C;     /* Cèdre */
  --blanc:#F2EFE8;     /* Blanc cassé */

  /* --- Typographie --- */
  --f-display:"Krona One","Arial Black",sans-serif;       /* titres, mots géants (toujours en majuscules) */
  --f-text:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif; /* textes */
  --t-giant:clamp(3rem,11vw,11.5rem);
  --t-h2:clamp(1.6rem,4.3vw,4.4rem);
  --t-h3:clamp(1.15rem,1.9vw,1.75rem);
  --t-lead:clamp(1.6rem,4.4vw,4.6rem);
  --t-body:clamp(1rem,1.15vw,1.2rem);
  --t-small:.8125rem;

  /* --- Espacements --- */
  --pad:clamp(18px,4vw,64px);          /* marge latérale */
  --sec:clamp(72px,12vw,180px);        /* espace vertical entre sections */
  --gap:clamp(16px,2.4vw,40px);

  /* --- Formes --- */
  --r-pill:999px;
  --r-s:4px;
  --line:2px;
  --tri:polygon(50% 0,100% 100%,0 100%); /* LE triangle A-Frame */

  /* --- Mouvement --- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --d-fast:.3s;
  --d-med:.7s;
  --d-season:1.1s;                     /* changement de saison (couleur de fond) */
}

/* --- Les 4 saisons + la nuit : thèmes appliqués sur <body data-theme> --- */
body,[data-theme="hiver"]{--bg:var(--blanc);--ink:var(--epinette);--ac:var(--cedre);--on-ac:var(--noir)}
[data-theme="printemps"]{--bg:var(--sauge);--ink:var(--noir);--ac:var(--epinette);--on-ac:var(--blanc)}
[data-theme="ete"]{--bg:var(--epinette);--ink:var(--blanc);--ac:var(--sauge);--on-ac:var(--noir)}
[data-theme="automne"]{--bg:var(--cedre);--ink:var(--noir);--ac:var(--blanc);--on-ac:var(--noir)}
[data-theme="nuit"]{--bg:var(--noir);--ink:var(--blanc);--ac:var(--cedre);--on-ac:var(--noir)}