/* AR Hypnose — design tokens.
   Single source of truth. No raw hex or px values anywhere else in the codebase. */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-SemiBoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@layer tokens {
  :root {
    /* ---- Palette de marque ---------------------------------------------- */
    --c-navy:  #1a2f59;
    --c-ivory: #faf6ee;

    /* Rôles sémantiques : une palette bicolore, avec opacité uniquement
       pour la hiérarchie du texte, les filets et les images. */
    --c-paper:       var(--c-ivory);
    --c-card:        var(--c-ivory);
    --c-surface:     var(--c-ivory);
    --c-ink:         var(--c-navy);
    --c-ink-muted-default: color-mix(in srgb, var(--c-navy) 74%, transparent);
    --c-ink-muted:   var(--c-ink-muted-default);
    --c-ink-muted-inverse: color-mix(in srgb, var(--c-ivory) 78%, transparent);
    --c-accent:      var(--c-navy);
    --c-accent-deep: var(--c-navy);
    --c-line-default: color-mix(in srgb, var(--c-navy) 24%, transparent);
    --c-line:        var(--c-line-default);
    --c-line-inverse: color-mix(in srgb, var(--c-ivory) 32%, transparent);
    --c-overlay:     color-mix(in srgb, var(--c-navy) 30%, transparent);
    --hero-overlay:  var(--c-overlay);
    --hero-overlay-accompaniment: color-mix(in srgb, var(--c-navy) 40%, transparent);

    /* ---- Typographie ---------------------------------------------------- */
    --font-display: "Instrument Serif", Georgia, serif;
    --font-body:    "Instrument Sans", Helvetica, Arial, sans-serif;
    --weight-regular: 400;
    --weight-medium:  600;

    /* Perfect Fourth — ratio 1.333 from a 1rem / 16px body size. */
    --fs-caption: 0.75rem;
    --fs-nav:     0.875rem;
    --fs-body:    1rem;
    --fs-lead:    1.333rem;
    --fs-h3:      var(--fs-lead);
    --fs-h2:      1.777rem;
    --fs-h1:      2.369rem;
    --fs-opener:  clamp(3.157rem, 5vw, 4.209rem);
    --fs-display-l: clamp(3.75rem, 6.5vw, 6.75rem);

    /* Rôles de titres : la balise conserve la sémantique, le composant
       choisit le rôle visuel. */
    --fs-section-title: clamp(var(--fs-h1), 4vw, 4.209rem);
    --fs-component-title: var(--fs-h2);

    --lh-display: 1.06;
    --lh-heading: 1.18;
    --lh-body:    1.65;
    --lh-lead:    1.4;
    --lh-reading: 1.55;
    --lh-statement: 1.15;

    --tracking-display: -0.015em;
    --tracking-heading: -0.01em;
    --tracking-text:    -0.02em;
    --tracking-ui:      -0.02em;

    /* ---- Espacement ----------------------------------------------------- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs:  0.75rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6.5rem;
    --space-3xl: 10rem;

    /* Rythme vertical des sections */
    --section-space-compact: var(--space-l);
    --section-space-default: calc(var(--space-xl) + var(--space-s));
    --section-space-feature: var(--space-2xl);

    /* ---- Grille --------------------------------------------------------- */
    --measure:   66ch;
    --measure-lead: 38ch;
    --measure-title: 20ch;
    --measure-title-wide: 22ch;
    --measure-title-short: 12ch;
    --measure-section-title: 16ch;
    --practitioner-image-width: 100%;
    --container: 1440px;
    --gutter:    var(--space-m);
    --header-height: 5rem;
    --logo-width: 8.5rem;
    --logo-height: 2.125rem;
    --split-min-column: 12rem;
    --hero-parallax-overscan: 8%;
    --hero-parallax-ratio: 0.06;
    --journey-step-height: 52svh;
    --page-opener-min-height: clamp(28rem, 62svh, 40rem);
    --page-opener-min-height-mobile: 26rem;
    --page-opener-min-height-compact: clamp(20rem, 42svh, 28rem);
    --journey-number-size: clamp(4.209rem, 10vw, 9.969rem);
    --ratio-landscape: 4 / 3;
    --z-header: 100;
    --z-lightbox: 1000;
    --target-size: 2.75rem;
    --target-size-compact: 1.5rem;

    /* ---- Divers --------------------------------------------------------- */
    --radius:     0;
    --line-width: 1px;
    --line-width-strong: 0.125rem;
    --outline-offset: 0.1875rem;
    --arrow-shift: 0.25rem;
    --visually-hidden-size: 0.0625rem;
    --underline-offset: 0.2em;
    --opacity-link-hover: 0.85;
    --image-hover-scale: 1.025;
    --opacity-secondary: 0.78;
    --lightbox-backdrop-opacity: 0.88;
    --lightbox-inset-ratio: 0.1;
    --list-indent: 1.25em;
    --rule:       var(--line-width) solid var(--c-line);
    --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-hover: cubic-bezier(0.165, 0.84, 0.44, 1);
    --duration-page: 450ms;
    --duration-reduced: 0.01ms;
    --duration-discrete: 1ms;
    --transition: 180ms var(--ease-standard);
    --transition-header: 500ms var(--ease-hover);
    --transition-link: 800ms var(--ease-hover);
    --transition-page: var(--duration-page) var(--ease-standard);
  }

  @media (min-width: 48rem) {
    :root {
      --section-space-compact: var(--space-xl);
      --section-space-default: calc(var(--space-2xl) + var(--space-m));
      --section-space-feature: var(--space-3xl);
    }
  }

}