/* ============================================
   AtypikHouse — Design Tokens
   Source: Charte Graphique v1.0 · KOSMO Agency
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Lora:ital,wght@0,400;1,400&display=swap');

:root {
  /* ── Couleurs principales ── */
  --color-braise:        #C4714A;
  --color-braise-l:      #D4866A;
  --color-braise-f:      #A55B35;
  --color-braise-text:   #4A2009; /* version haute lisibilité petits textes, contraste 9:1+ sur fonds clairs */
  --color-braise-on-dark: #F4B088; /* ~4.7:1 sur fond mousse-f — textes orange lisibles sur fonds verts */
  --color-mousse:     #466741;
  --color-mousse-l:   #608A5B;
  --color-mousse-f:   #2D4A29;
  --color-lin:        #EDECCC;
  --color-lin-l:      #F5F4E6;
  --color-lin-dark:   #D9D8B0;
  --color-bois:       #7B583A;
  --color-bois-f:     #5C3E26;
  --color-brume:      #8B9EAB;
  --color-brume-text: #526675; /* ~5.1:1 sur lin, ~5.7:1 sur cream — usage texte sur fonds clairs */
  --color-cream:      #FAF9F7;
  --color-white:      #FFFFFF;
  --color-black:      #1A1A1A;

  /* ── Typographie ── */
  --font-principal:   'Jost', sans-serif;
  --font-editorial:   'Lora', serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;

  /* ── Type scale ── */
  --text-hero:        clamp(2.4rem, 5vw, 3.8rem);
  --text-h2:          clamp(1.6rem, 3vw, 2rem);
  --text-h3:          1.188rem;   /* 19px */
  --text-nav:         0.813rem;   /* 13px */
  --text-body:        0.938rem;   /* 15px */
  --text-micro:       0.688rem;   /* 11px */

  --lh-hero:   1.15;
  --lh-body:   1.7;
  --lh-tight:  1.2;
  --ls-nav:    0.04em;
  --ls-micro:  0.1em;

  /* ── Espacements (multiples of 8) ── */
  --sp-xs:   4px;
  --sp-s:    8px;
  --sp-m:    16px;
  --sp-l:    24px;
  --sp-xl:   40px;
  --sp-xxl:  64px;

  /* ── Grille Desktop ── */
  --grid-cols:   12;
  --grid-gutter: 24px;
  --grid-margin: 40px;
  --max-width:   1320px;

  /* ── Radius ── */
  --radius-ui:   2px;
  --radius-img:  3px;
  --radius-full: 50%;

  /* ── Transitions ── */
  --transition: 0.2s ease;

  /* ── Ombres ── */
  --shadow-card: 0 2px 12px rgba(123, 88, 58, 0.10);
  --shadow-hover: 0 6px 24px rgba(123, 88, 58, 0.16);
}