/**
 * AbayaFemme design tokens.
 *
 * Source of truth: DESIGN.md sections 6 and 7.
 * Tokens are declared exactly once. Components never restate a raw hex, radius
 * or spacing value that already has a token (RULES.md section 5).
 */

/* ---------------------------------------------------------------------------
 * Self-hosted variable fonts.
 *
 * Two subsets per family. `latin` (U+0000-00FF) already covers every French
 * accent, so `latin-ext` is only fetched when a page actually needs it.
 * font-display:swap keeps first paint independent of font loading.
 * ------------------------------------------------------------------------- */

/* Bodoni Moda — the display face.
 *
 * A Didone: near-vertical stress, hairline serifs, extreme thick/thin contrast. It is
 * the typographic language of fashion editorial (Vogue, Harper's), which is exactly the
 * register this store sells in. Cormorant Garamond, the previous choice, is a warm
 * Renaissance revival — beautiful, but it reads "wedding stationery" rather than
 * "collection".
 *
 * Variable on two axes. `opsz` matters here: a Didone's hairlines disappear at 14px and
 * look coarse at 80px, so the optical-size axis is what makes one file work for a
 * product-card title and a hero headline. `font-optical-sizing: auto` is set on the
 * scope root so browsers drive it from the rendered size.
 */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-optical-sizing: auto;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-var.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: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-optical-sizing: auto;
  font-display: swap;
  src: url("../fonts/bodoni-moda-latin-ext-var.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;
}

/* The euro sign, borrowed.
 *
 * Bodoni Moda v28 draws U+20AC as a bare "C": no crossbars, no aperture. Our file is
 * byte-identical to Google's own latin subset (md5 0492c861…), so this is the typeface,
 * not our build — re-subsetting cannot fix it. Untreated, every price set in the display
 * face reads "49,90 C", which a customer reads as a currency she does not recognise.
 *
 * So one codepoint is served from Cormorant Garamond, which was the previous display face
 * and is still shipped. Its euro is a proper old-style euro and sits in register with
 * Bodoni's figures; Jost's geometric one does not, and the browser declines to override a
 * face whose weight range differs anyway — matching `400 700` exactly is what makes this
 * win, since among equally-matching faces for a codepoint the last one declared is used.
 *
 * `size-adjust` compensates Cormorant's smaller cap height so the symbol matches the digits
 * beside it. Declared after both Bodoni faces on purpose: moving it above them restores the
 * bug silently.
 */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  unicode-range: U+20AC;
  size-adjust: 118%;
}

/* The underscore, borrowed for the same reason.
 *
 * Bodoni Moda is a didone, so its underscore is a true hairline sitting well below the
 * baseline. That is correct type design and quite wrong for our content: community
 * pseudonyms contain underscores, and `Lina_b` set in the display face at 18px rendered as
 * `Lina b` — the name looked broken, and a name is something a member may need to read back
 * or type. Verified as a rendering problem rather than a missing glyph: the advance width is
 * 10.08px, and at 3× the hairline is visible.
 *
 * Jost's underscore is a solid stroke, and unlike the euro there is no register to match:
 * an underscore has no relationship to the figures around it. Same mechanism as above —
 * `font-weight: 400 700` matched exactly, declared after both Bodoni faces.
 */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jost-latin-var.woff2") format("woff2");
  unicode-range: U+005F;
}

/* Jost — the interface face.
 *
 * A geometric sans in the Futura lineage: single-storey `a`, circular bowls, generous
 * counters. Set in caps with tracking it gives navigation, eyebrows and buttons the
 * quiet authority fashion houses use, and it holds up as body copy at 14-16px. Inter is
 * an excellent UI face and a completely anonymous one — it is the default of every
 * dashboard on the internet, which is the opposite of what a storefront wants.
 */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin-var.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: "Jost";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-latin-ext-var.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;
}

:root {
  /* --- Colour -------------------------------------------------------------
   * Contrast verified against --af-color-ivory (#faf7f2) as the page ground:
   *   ink        #24231f  16.1:1  AAA body text
   *   ink-muted  #625f58   6.0:1  AA body text, AAA large
   *   olive-800  #4d4c38  9.2:1   primary button ground, white text 8.1:1
   *   taupe      #a28b78   2.6:1  decorative only, never essential text
   * ---------------------------------------------------------------------- */
  --af-color-ink: #24231f;
  --af-color-ink-muted: #625f58;
  --af-color-olive-900: #3f3f2f;
  --af-color-olive-800: #4d4c38;
  --af-color-olive-700: #5b5a42;
  --af-color-olive-600: #6d6b50;
  --af-color-olive-200: #deddd0;
  --af-color-olive-100: #efeee6;
  /* Sampled from the approved mockups: the promotional bar and the newsletter card
   * sit on a mid olive, and the footer on a near-black charcoal. Using olive-900 for
   * all three flattened three distinct planes into one. */
  --af-color-charcoal: #292928;
  --af-color-ivory: #faf7f2;
  --af-color-cream: #f5efe8;
  --af-color-sand: #eadfd2;
  --af-color-taupe: #a28b78;
  --af-color-blush: #dcc7ba;
  --af-color-white: #ffffff;
  --af-color-border: #e6dfd7;
  --af-color-border-strong: #cfc5ba;
  --af-color-success: #39704d;
  --af-color-warning: #9a6429;
  --af-color-danger: #a43f3f;
  --af-color-info: #416987;
  --af-color-focus: #245fb8;
  --af-color-overlay: rgb(24 23 20 / 58%);

  /* Semantic aliases. Components reference these, not the raw palette, so a
   * palette change stays a one-line edit. */
  --af-surface-page: var(--af-color-ivory);
  --af-surface-raised: var(--af-color-white);
  --af-surface-sunken: var(--af-color-cream);
  --af-surface-accent: var(--af-color-olive-100);
  --af-surface-inverse: var(--af-color-olive-900);
  --af-surface-promo: var(--af-color-olive-600);
  --af-surface-footer: var(--af-color-charcoal);
  --af-text-default: var(--af-color-ink);
  --af-text-muted: var(--af-color-ink-muted);
  --af-text-inverse: var(--af-color-ivory);
  --af-text-link: var(--af-color-olive-800);
  --af-action-bg: var(--af-color-olive-800);
  --af-action-bg-hover: var(--af-color-olive-900);
  --af-action-text: var(--af-color-white);
  --af-border-default: var(--af-color-border);
  --af-border-strong: var(--af-color-border-strong);

  /* --- Typography ------------------------------------------------------- */
  --af-font-display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --af-font-ui: "Jost", "Century Gothic", system-ui, -apple-system, sans-serif;

  --af-text-display-xl: clamp(2.75rem, 5vw, 5rem);
  --af-text-h1: clamp(2.25rem, 4vw, 4rem);
  --af-text-h2: clamp(1.875rem, 3vw, 3rem);
  --af-text-h3: clamp(1.5rem, 2vw, 2.25rem);
  --af-text-h4: 1.25rem;
  --af-text-body-lg: 1.125rem;
  --af-text-body: 1rem;
  --af-text-sm: 0.875rem;
  --af-text-micro: 0.75rem;

  --af-leading-display: 1.05;
  --af-leading-heading: 1.2;
  --af-leading-body: 1.65;
  --af-tracking-eyebrow: 0.12em;

  /* --- Spacing (8px rhythm; dense transactional UI may use the 4px steps) */
  --af-space-1: 0.25rem;
  --af-space-2: 0.5rem;
  --af-space-3: 0.75rem;
  --af-space-4: 1rem;
  --af-space-5: 1.5rem;
  --af-space-6: 2rem;
  --af-space-7: 3rem;
  --af-space-8: 4rem;
  --af-space-9: 6rem;

  /* --- Radius ----------------------------------------------------------- */
  --af-radius-sm: 0.5rem;
  --af-radius-md: 0.75rem;
  --af-radius-lg: 1.125rem;
  --af-radius-xl: 1.5rem;
  --af-radius-pill: 999px;

  /* --- Shadow (borders carry most separation; shadows stay subtle) ------ */
  --af-shadow-sm: 0 1px 2px rgb(30 26 22 / 5%);
  --af-shadow-md: 0 10px 30px rgb(45 37 30 / 8%);
  --af-shadow-lg: 0 24px 60px rgb(45 37 30 / 12%);

  /* --- Motion ----------------------------------------------------------- */
  --af-duration-fast: 160ms;
  --af-duration-base: 200ms;
  --af-duration-slow: 240ms;
  --af-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* --- Layout ----------------------------------------------------------- */
  --af-container-max: 1280px;
  --af-measure-article: 74ch;
  --af-measure-form: 680px;
  --af-gutter: var(--af-space-4);

  /* --- Focus ring ------------------------------------------------------- */
  --af-focus-width: 3px;
  --af-focus-offset: 2px;

  /* --- Product imagery --------------------------------------------------
   * The catalogue is portrait garment photography (source assets are ~9:16).
   * One token keeps every grid, card and gallery in step. */
  --af-ratio-product: 3 / 4;
  --af-ratio-product-tall: 9 / 16;
  --af-ratio-editorial: 4 / 5;
}

@media (min-width: 768px) {
  :root {
    --af-gutter: var(--af-space-5);
  }
}

@media (min-width: 1024px) {
  :root {
    --af-gutter: var(--af-space-6);
  }
}

/* Motion tokens collapse rather than every component re-declaring the query. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --af-duration-fast: 1ms;
    --af-duration-base: 1ms;
    --af-duration-slow: 1ms;
  }
}