/* =============================================================
   S Fashion — Design Tokens
   Source of truth: DESIGN.md (Stitch 9-section spec).
   Do not improvise values. Do not invent additional shades.
   ============================================================= */

:root {
  /* ---------- Brand ----------------------------------------- */
  --brand-rose:        #C9A6A4;  /* oklch(74% 0.04 20)   primary accent */
  --brand-rose-deep:   #A67F7C;  /* oklch(60% 0.05 22)   hover / active */
  --brand-rose-mist:   #F0E4E2;  /* oklch(92% 0.015 25)  section wash (max 1×/page) */

  /* ---------- Neutrals (warm, to bridge rose) -------------- */
  --ink:               #1A1815;  /* primary text, near-black */
  --ink-soft:          #45413B;  /* secondary text */
  --ink-muted:         #8A857C;  /* tertiary text, captions, placeholders */
  --bone:              #F7F4EF;  /* primary page background */
  --bone-warm:         #EFE9E0;  /* alternate section background, image fallback */
  --paper:             #FFFFFF;  /* card surfaces, hero canvas */
  --rule:              #DDD6CC;  /* borders, dividers */

  /* ---------- Functional ----------------------------------- */
  --success:           #5C6B4A;  /* muted olive — in stock, confirmations */
  --alert:             #8B3A2C;  /* muted brick — low stock, warnings */

  /* ---------- Typography stack ----------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- Type scale (1.25 modular — major third) ------ */
  --text-xs:   12px;   --lh-xs:   1.5;
  --text-sm:   14px;   --lh-sm:   1.55;
  --text-base: 16px;   --lh-base: 1.65;
  --text-lg:   20px;   --lh-lg:   1.5;
  --text-xl:   25px;   --lh-xl:   1.35;
  --text-2xl:  32px;   --lh-2xl:  1.25;
  --text-3xl:  44px;   --lh-3xl:  1.15;
  --text-4xl:  64px;   --lh-4xl:  1.05;
  --text-5xl:  88px;   --lh-5xl:  1;    /* once per page max */

  /* ---------- Geometry ------------------------------------- */
  --radius:        0;             /* sharp — no rounding anywhere */
  --border-1:      1px solid var(--rule);
  --border-ink:    1px solid var(--ink);

  /* ---------- Elevation (sparing, modals/cart only) -------- */
  --shadow-none:        none;
  --shadow-cart-popup:  0 8px 32px rgba(26, 24, 21, 0.08);
  --shadow-modal:       0 16px 48px rgba(26, 24, 21, 0.12);

  /* ---------- Layout --------------------------------------- */
  --content-max:    1280px;
  --gutter:         24px;
  --gutter-tablet:  16px;
  --gutter-mobile:  16px;
  --page-pad:       48px;
  --page-pad-tab:   32px;
  --page-pad-mob:   16px;

  /* ---------- Section rhythm ------------------------------- */
  --section-y:        120px;   /* desktop */
  --section-y-tablet:  80px;
  --section-y-mobile:  56px;
  --section-gap:       48px;   /* heading → content */
  --section-gap-mob:   32px;

  /* ---------- Breakpoints (reference, used in @media) ----- */
  /* mobile: 375px · tablet: 768px · desktop: 1024px · wide: 1280px */

  /* ---------- Motion --------------------------------------- */
  --t-fast:  150ms;
  --t-base:  200ms;
  --t-slow:  320ms;
  --ease:    cubic-bezier(0.2, 0.6, 0.2, 1);
}