/* ==========================================================================
   Blush POC — Design tokens (S1)
   Single source of truth. Every colour, space and type value in later slices
   MUST compose from these custom properties — a hardcoded value is a defect.
   ========================================================================== */

:root {
  /* --- Palette ---------------------------------------------------------- */
  --color-light: #F9F5F3;        /* page base background */
  --color-washed: #928884;
  --color-accent: #BA8269;
  --color-light-brown: #66483A;
  --color-brown: #412E25;
  --color-dark: #110C0A;
  --color-blush-wash: #E3CDC3;   /* footer wordmark tint (from Figma) */

  /* Video-blend backdrop — set PER PAGE / PER VIDEO to match the video's own
     studio colour (see brief "Page theme"). This page + video: #CBC9CE
     (operator, S9). ONE var; the backdrop, edge strips and page gradient all
     derive from it. */
  --background-theme: #CBC9CE;

  /* --- Spacing scale ---------------------------------------------------- */
  --space-80: 80px;
  --space-64: 64px;
  --space-40: 40px;
  --space-20: 20px;
  --space-16: 16px;   /* drawer price ↔ bag gap (operator, S9) */
  --space-12: 12px;

  /* --- Type: families -------------------------------------------------- */
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- Type: weights (only the embedded weights exist) ----------------- */
  --weight-title: 600;   /* Playfair Display */
  --weight-body: 300;    /* Inter regular text */
  --weight-strong: 700;  /* Inter bold (UI/labels — used from S2 on) */

  /* --- Type: line-height & tracking ------------------------------------ */
  --leading-title: 0.9;  /* 90% */
  --leading-body: 1.5;   /* 150% */
  --tracking-title: -0.01em; /* -1% */

  /* --- Type: fluid sizes ----------------------------------------------
     clamp(min → max) fluid between a 375px and a 1280px viewport.
     Bounds are the ground-truth token sizes; the calc() blends between them. */
  --size-title: clamp(40px, calc(23.43px + 4.42vw), 80px);      /* title     40 → 80 */
  --size-title-sm: clamp(32px, calc(18.74px + 3.54vw), 64px);   /* title-sm  32 → 64 */
  --size-body: clamp(14px, calc(13.17px + 0.22vw), 16px);       /* body      14 → 16 */
  --size-body-sm: 12px;                                          /* body-sm   fixed  */
  /* Price block (operator, S9): both fixed, both breakpoints — the amount is a
     set display size, not the fluid title clamp. */
  --size-price: 32px;                                            /* amount    fixed  */
  --size-currency: 16px;                                         /* AED label fixed  */
  --size-heading: 40px;                                          /* section heading (footer "About") */

  /* --- Layout dimensions ----------------------------------------------- */
  /* The content container (brief). ONE source of truth: the page, the header
     inner and the footer all size from --page-max; the text/media/logo/icon
     blocks all size from --media-size. Change a product's grid here, once. */
  --page-max: 1280px;    /* desktop content max-width */
  --media-size: 500px;   /* product media block is 500×500; the text column and
                            the header's logo/icon blocks mirror it */

  /* Mobile hero end-height: dictates the video's final position on small
     screens. Sensible default; TUNED per-video in a later slice (see brief
     "Critical main video behaviour"). */
  --video-height-sm: 70vh;

  /* The theme→light melt: how far the video's WORLD fades out below the
     video's bottom edge (the hero field's apron — css/overlays.css). A
     viewport share; per-page design knob, like --background-theme itself. */
  --melt-span: 50svh;

  /* --- Icons (S2) ------------------------------------------------------- */
  /* Header logo/icon SOURCE colours under mix-blend-mode:difference — authored
     as inverses so the RENDERED colour lands on the palette (operator, S9):
     icons (brown):
       over the hero environment #CBC9CE → |CB−8A, C9−9B, CE−A9| = #412E25 (brown)
       over the light page #F9F5F3   → |F9−8A, F5−9B, F3−A9| = #6F5A4A (≈ light-brown)
     logo (accent):
       over the hero environment #CBC9CE → |CB−11, C9−47, CE−65| = #BA8269 (accent)
       over the light page #F9F5F3   → |F9−11, F5−47, F3−65| = #E8AE8E (≈ light accent)
     Recompute if --background-theme or --color-light change. */
  --icon-inverse: #8A9BA9;
  --logo-inverse: #114765;
  --icon-size: 20px;   /* header icon box (shopping bag + menu; operator, S9) */
  --icon-sm: 16px;     /* tabby pay-later mark */
  --icon-md: 24px;     /* footer socials · drawer price bag */
  --icon-lg: 32px;     /* desktop price bag */

  /* --- Hero framing (S5) ------------------------------------------------
     Focal point for the hero canvas cover-fit (object-position semantics):
     the frame point placed at the canvas-box centre, clamped so no edge gap
     shows. Unitless 0..1. Only the axis with crop overflow acts per
     breakpoint — x centres the end-frame subject on the mobile portrait box,
     y tunes the vertical crop on the desktop landscape box; each is inert on
     the other. Tuned against assets/frames/hero/0169.webp during S5 (mobile
     375×812 centres the figure at x=0.74; desktop 16/9 lands the crop on the
     lower body — floral hem + feet — with a clean cut above the chest). */
  --hero-anchor-x: 0.74;  /* mobile: centres the end-frame subject */
  --hero-anchor-y: 0.65;  /* desktop: lower-body / hem crop (head above frame) */

  /* The hero film's own frame aspect (this film: 1280×1080) — PER VIDEO. Drives
     both the desktop video box (aspect-ratio) and its height-derived width, so
     a differently-shaped film is one edit. */
  --hero-aspect: 1280 / 1080;
}