/* Maison Longevity : les six fichiers de tokens du design system, reunis.
   Sept requetes bloquantes pour 7 Ko coutaient 750 ms sur mobile.
   Source : $D/tokens/ */

/* ---------- fonts.css ---------- */
/* Maison Longevity webfonts — auto-hébergées, licence SIL Open Font (OFL).
   Les binaires sont dans assets/fonts/, avec leur licence.

   SANS — Josefin Sans, fonte variable 100–700. x-height très basse : elle
   paraît plus petite qu'un sans classique à taille égale, les valeurs de
   tokens/typography.css intègrent déjà cette compensation. Corps de texte
   jamais sous 17px.

   SCRIPT — Style Script, un seul poids. Le L majuscule porte la variante L.002
   de la fonte, choisie par la cliente pour se rapprocher du logo. Mots de marque uniquement, jamais
   sous 32px, jamais de faux gras. */

@font-face {
  font-family: "Josefin Sans";
  src: url("/assets/fonts/JosefinSans-Variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Style Script";
  src: url("/assets/fonts/StyleScript-7caa1898.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ml-font-sans: "Josefin Sans", -apple-system, "Segoe UI", sans-serif;
  --ml-font-script: "Style Script", "Snell Roundhand", cursive;
}

/* ---------- colors.css ---------- */
/* Base palette — blue only. Contrast ratios are measured against --ml-paper (#F2FBFC). */
:root {
  --ml-ink: #12345b;        /* 11.98:1 — primary text, headings, filled buttons */
  --ml-ink-2: #204065;      /* the lighter navy stripe inside the ink-ground marks */
  --ml-accent: #356a86;     /* 5.62:1 — section titles, links, captions */
  --ml-sky: #bbe6f1;        /* SURFACES, RULES, FILLS, BORDERS ONLY — never text (1.27:1) */
  --ml-paper: #f2fbfc;      /* page background */
  --ml-mist: #e3f2f7;       /* alternate section background */
  --ml-mist-deep: #d2e9f0;  /* the third surface — replaces the withdrawn beige */
  --ml-white: #ffffff;      /* cards, overlays */

  /* Stripe values sampled from the supplied brand artwork. Use these — not the
     surface tokens — when reproducing the striped grounds and roundels. */
  --ml-stripe-cream: #fbfaf7;
  --ml-stripe-sky: #e4f4f7;
}

/* ---------- typography.css ---------- */
:root {
  /* Sizes: desktop → mobile handled by the --ml-*-m pair.
     Set for Josefin Sans, whose low x-height reads ~10% smaller than a
     normal geometric sans at the same pixel size — body and small are
     bumped accordingly, display is not (it is large enough already). */
  --ml-size-display: 56px;   --ml-size-display-m: 36px;
  --ml-size-h2: 36px;        --ml-size-h2-m: 28px;
  --ml-size-h3: 24px;        --ml-size-h3-m: 20px;
  --ml-size-body: 19px;      --ml-size-body-m: 18px;
  --ml-size-small: 16px;
  --ml-size-eyebrow: 13px;
  --ml-size-button: 15px;
  --ml-size-script: 44px;    --ml-size-script-m: 32px;

  --ml-weight-light: 300;
  --ml-weight-regular: 400;
  --ml-weight-medium: 500;
  --ml-weight-semibold: 600;
  --ml-weight-bold: 700;

  /* Titles are BOLD. Display, headings and the large caps statement lines
     all run Josefin Sans 700 — the weight the brand artwork sets them in.
     Body copy stays 400; only titles take the bold. */
  --ml-weight-title: 400;

  --ml-track-caps: 0.12em;        /* small labels, eyebrows, buttons */
  --ml-track-caps-title: 0.01em;  /* large BOLD caps title lines — nearly none */
  --ml-track-display-caps: 0.02em;
  --ml-track-display: -0.01em;
  --ml-track-logotype: 0.28em; /* LONGEVITY in the logotype */

  --ml-leading-display: 1.15;
  --ml-leading-heading: 1.3;
  --ml-leading-body: 1.6;

  --ml-measure: 68ch;       /* 60–75 characters */
}

/* ---------- spacing.css ---------- */
:root {
  --ml-space-1: 8px;
  --ml-space-2: 16px;
  --ml-space-3: 24px;
  --ml-space-4: 40px;
  --ml-space-5: 64px;
  --ml-space-6: 96px;
  --ml-space-7: 128px;

  --ml-section-y: 128px;    /* desktop section vertical padding */
  --ml-section-y-m: 64px;   /* mobile */
  --ml-gap-max: 128px;      /* never leave more empty vertical space than this */
}

/* ---------- layout.css ---------- */
:root {
  --ml-content-max: 1200px;
  --ml-columns: 12; /* @kind other */
  --ml-gutter: 80px;
  --ml-gutter-m: 24px;

  --ml-radius-control: 4px;   /* buttons, inputs */
  --ml-radius-card: 12px;     /* image cards */
  --ml-radius-round: 50%;     /* the monogram roundel, nothing else */

  --ml-rule: 1px solid var(--ml-sky);
  --ml-rule-heavy: 3px solid var(--ml-sky);

  --ml-shadow: none;          /* the brand has no shadow system, by decision */

  --ml-header-h: 72px;
  --ml-tap-min: 44px;

  --ml-motion-rise: 12px;
  --ml-motion-duration: 400ms; /* @kind other */
  --ml-motion-ease: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */

  --ml-focus-ring: 2px solid var(--ml-accent);
  --ml-focus-offset: 2px;
}

/* ---------- semantic.css ---------- */
/* Semantic aliases. Prefer these in component code. */
:root {
  --ml-text-body: var(--ml-ink);
  --ml-text-heading: var(--ml-ink);
  --ml-text-secondary: var(--ml-accent);
  --ml-text-caption: var(--ml-accent);
  --ml-text-eyebrow: var(--ml-accent);
  --ml-text-link: var(--ml-accent);
  --ml-text-link-hover: var(--ml-ink);
  --ml-text-inverse: var(--ml-white);

  --ml-surface-page: var(--ml-paper);
  --ml-surface-card: var(--ml-white);
  --ml-surface-alt: var(--ml-mist);
  --ml-surface-deep: var(--ml-mist-deep);
  --ml-surface-inverse: var(--ml-ink);
  --ml-surface-fill: var(--ml-sky);       /* decorative fills only */

  --ml-border-subtle: var(--ml-sky);
  --ml-border-strong: var(--ml-accent);

  --ml-button-primary-bg: var(--ml-ink);
  --ml-button-primary-fg: var(--ml-white);
  --ml-button-primary-bg-hover: var(--ml-accent);
  --ml-button-ghost-fg: var(--ml-accent);
  --ml-button-ghost-border: var(--ml-accent);
  --ml-button-ghost-bg-hover: var(--ml-mist);

  --ml-ribbon-bg: var(--ml-sky);
}