/* ============================================================
   Design tokens — Lise Gosmain Ostéopathe
   Source de vérité pour palette, typographie, espacements.
   Tout le reste consomme ces variables.
   ============================================================ */

/* --- Self-hosted fonts (RGPD-light, no Google Fonts CDN) ---- */

@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/vollkorn-regular.woff2') format('woff2-variations'),
       url('../assets/fonts/vollkorn-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Vollkorn';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/vollkorn-italic.woff2') format('woff2-variations'),
       url('../assets/fonts/vollkorn-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/karla-regular.woff2') format('woff2-variations'),
       url('../assets/fonts/karla-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/karla-italic.woff2') format('woff2-variations'),
       url('../assets/fonts/karla-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Latin-extended (accents français étendus, EN extras) */
@font-face {
  font-family: 'Vollkorn';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/vollkorn-regular.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Gliker — signature Bèu Studio */
@font-face {
  font-family: 'Gliker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Gliker-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/karla-regular-ext.woff2') format('woff2-variations'),
       url('../assets/fonts/karla-regular-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/karla-italic-ext.woff2') format('woff2-variations'),
       url('../assets/fonts/karla-italic-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------- */

:root {
  /* === Couleurs (OKLCH, palette tintée terre cuite ~35-40°) === */

  /* Surfaces — 60% du visuel */
  --surface-cream:    oklch(97% 0.012 75);     /* fond global, crème lin */
  --surface-sand:     oklch(94% 0.02 70);      /* sections alternées */
  --surface-paper:    oklch(98.5% 0.008 75);   /* rare, presque blanc */
  --surface-clay:     oklch(89% 0.025 55);     /* zone calme, argile pâle */

  /* Encres — 30% (texte, séparateurs) */
  --ink-primary:      oklch(28% 0.022 55);     /* cocoa-warm, body */
  --ink-secondary:    oklch(45% 0.025 50);     /* sépia clair */
  --ink-tertiary:     oklch(52% 0.025 50);     /* meta, dates — AA OK sur cream/sand */
  --ink-quaternary:   oklch(65% 0.02 60);      /* placeholder, plus-disabled */
  --stroke-soft:      oklch(85% 0.015 70);     /* hairlines */
  --stroke-strong:    oklch(70% 0.022 55);     /* hairlines + visibles */

  /* Accent — 10% (CTAs, liens hover, highlights) */
  --accent:           oklch(58% 0.12 35);      /* terre cuite */
  --accent-deep:      oklch(48% 0.105 32);     /* hover, pressed */
  --accent-soft:      oklch(85% 0.045 40);     /* fond doux, badge */
  --accent-paper:     oklch(94% 0.025 45);     /* fond très soft */

  /* Tertiaire (rare, < 2%) */
  --olive-mute:       oklch(50% 0.045 130);    /* éditorial accent */

  /* Signature Bèu Studio */
  --beu-orange:       rgb(217, 119, 87);

  /* Illustration olivier (hero) */
  --leaf-wash:           oklch(64% 0.075 130);  /* sauge soutenu, fill feuilles */
  --olive-fruit:         oklch(50% 0.105 125);  /* vert olive (non mûre) */
  --olive-fruit-outline: oklch(36% 0.075 125);  /* contour fruit */

  /* Sémantiques (raccourcis) */
  --bg:               var(--surface-cream);
  --fg:               var(--ink-primary);
  --link:             var(--ink-primary);
  --link-hover:       var(--accent-deep);

  /* === Typographie === */

  --font-display: 'Vollkorn', 'Iowan Old Style', 'Palatino Linotype',
                  'Palatino', 'Hoefler Text', Georgia, serif;
  --font-body: 'Karla', 'Inter UI', system-ui, -apple-system,
               'Segoe UI', Roboto, sans-serif;

  /* Échelle modulaire (ratio 1.333, perfect fourth) */
  --text-3xs:   0.6875rem;                                       /*  11px */
  --text-2xs:   0.75rem;                                         /*  12px */
  --text-xs:    0.8125rem;                                       /*  13px */
  --text-sm:    0.875rem;                                        /*  14px */
  --text-base:  1rem;                                            /*  16px */
  --text-md:    1.125rem;                                        /*  18px */
  --text-lg:    clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);          /* 20-24 */
  --text-xl:    clamp(1.5rem, 1vw + 1.25rem, 2rem);              /* 24-32 */
  --text-2xl:   clamp(1.875rem, 2vw + 1.25rem, 2.75rem);         /* 30-44 */
  --text-3xl:   clamp(2.5rem, 3vw + 1.5rem, 4rem);               /* 40-64 */
  --text-4xl:   clamp(3rem, 5vw + 1.5rem, 5.5rem);               /* 48-88 */
  --text-5xl:   clamp(3.5rem, 7vw + 1.5rem, 7.5rem);             /* 56-120 */

  /* Hauteurs de ligne */
  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;
  --leading-loose:   1.75;

  /* Tracking (letter-spacing) */
  --tracking-display: -0.02em;
  --tracking-body:    0;
  --tracking-caps:    0.12em;

  /* Poids (variable font axes) */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* === Espacements (4pt scale) === */

  --space-2xs: 0.25rem;    /*   4px */
  --space-xs:  0.5rem;     /*   8px */
  --space-sm:  0.75rem;    /*  12px */
  --space-md:  1rem;       /*  16px */
  --space-lg:  1.5rem;     /*  24px */
  --space-xl:  2rem;       /*  32px */
  --space-2xl: 3rem;       /*  48px */
  --space-3xl: 4rem;       /*  64px */
  --space-4xl: 6rem;       /*  96px */
  --space-5xl: 9rem;       /* 144px */

  /* Spacing fluide pour rythme vertical de page */
  --section-y:  clamp(4rem, 8vw, 9rem);
  --section-x:  clamp(1.25rem, 5vw, 5rem);
  --content-y:  clamp(1.5rem, 3vw, 3rem);

  /* === Containers === */

  --max-content:   72rem;       /* 1152px, page principale */
  --max-narrow:    44rem;       /* 704px, prose */
  --max-prose:     65ch;        /* corps de texte */

  /* === Bordures & rayons === */

  --hairline:  1px;
  --line:      1.5px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* === Ombres (sobres, légères, tintées chaud) === */

  --shadow-sm: 0 1px 2px oklch(28% 0.022 55 / 0.04),
               0 1px 1px oklch(28% 0.022 55 / 0.05);
  --shadow-md: 0 6px 16px oklch(28% 0.022 55 / 0.06),
               0 2px 4px oklch(28% 0.022 55 / 0.04);
  --shadow-lg: 0 16px 40px oklch(28% 0.022 55 / 0.08),
               0 4px 8px oklch(28% 0.022 55 / 0.05);

  /* === Motion === */

  --easing-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* ease-out-quart */
  --easing-inout:  cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:    160ms;
  --duration-base:    240ms;
  --duration-slow:    360ms;
  --duration-slower:  600ms;

  /* === Z-index === */

  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;
}

/* Reduced motion : neutralise toutes les durées */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0.01ms;
    --duration-base:   0.01ms;
    --duration-slow:   0.01ms;
    --duration-slower: 0.01ms;
  }
}