:root {
  /* Brand */
  --color-black: #000000;
  --color-cream: #f6eee9;
  --color-red: #a22323;
  --color-red-on-dark-large: #d50b0b;
  /* Confirmed via pixel-sampled audit: clears 3:1 (WCAG large-text
     threshold) against flat black with real margin (~3.5-3.75:1).
     Does NOT clear 4.5:1 — use only for text at large-text size
     (>=24px regular or >=18.66px bold). */
  --color-red-on-dark-normal: #ec0e0e;
  /* Confirmed via pixel-sampled audit: clears 4.5:1 against flat
     black (measured 4.64:1 at 12px/400, worst-case instance tested).
     Brighter/less brand-accurate than --color-red-on-dark-large
     by necessity — normal-size text needs a bigger margin from black. */

  /* ============================================================
     TEXT COLOR SYSTEM — three-level semantic scale, each half on
     var(--color-black)/cream backgrounds ("primary"/"inverse") and
     each level below primary progressively de-emphasized via opacity.
     Verified via real pixel-sampled contrast (not assumed) against
     every element these values are actually applied to before being
     locked in — see the sitewide text-color audit. Both non-trivial
     values (secondary/inverse-secondary) measured 8.6:1+ everywhere,
     comfortably clearing the 4.5:1 floor with room to spare. */
  --text-color-primary: var(--color-black);
  --text-color-secondary: rgba(0, 0, 0, 0.72);
  --text-color-muted: rgba(0, 0, 0, 0.6);

  --text-color-inverse: var(--color-cream);
  --text-color-inverse-secondary: rgba(246, 238, 233, 0.7);
  --text-color-inverse-muted: rgba(246, 238, 233, 0.6);

  /* Accent aliases only — --color-red / --color-red-on-dark-large /
     --color-red-on-dark-normal keep their current values and keep
     being used directly for borders/backgrounds/strokes. These three
     just give the text-color system a semantic name for the same
     values when applied to text. No consuming selector changes yet. */
  --text-color-accent: var(--color-red);
  --text-color-accent-on-dark-large: var(--color-red-on-dark-large);
  --text-color-accent-on-dark-normal: var(--color-red-on-dark-normal);

  /* Alias */
  --color-error: var(--color-red);
  --color-popup-success: #000000; /*decided as black for pop up success */
  --color-generic-green-success: #347a4e;
  /* Extended — repeated in code */
  --color-brown-gray: #2d2622;
  --color-dark-brown: #2d1a10;
  --color-product-grey: #aaaaaa;
  --color-rose-red: #c56b6b;
  --color-collection-label: var(--text-color-muted);
  /* Component alias — preserves every existing reference to this name.
     Confirmed identical usage in .product-detail__collection
     (css/product.css:144-150) and .product-card__tag
     (src/shop-all.html:265-274). */

  /* Extended — confirmed, single-occurrence */
  --color-near-black: #0a0a0a;
  --color-warm-dark-gray: #333130;
  --color-label-gray: #555555;
  --color-social-ring: #c9a5a5;
  --color-placeholder-bg: #e8e3dd;

  /* Font's used */
  --font-body: "Jost", sans-serif;
  --font-editorial: "Cormorant Garamond", serif;
  --font-headline: "Barlow Condensed", sans-serif;
  --font-logo: "Odibee Sans", sans-serif;
  
  /* Font weights jost has all of these, odibee sans only has regular  */ 
  --weight-thin:100;
  --weight-extra-light: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi-bold:600;
  --weight-bold: 700;
  --weight-extra-bold:800;
  --weight-black:900;

  /* ============================================================
     TYPOGRAPHY — TEXT ROLES
     Size, tracking, and weight are tokenized. Line-height is
     applied inline per selector (deliberately not tokenized —
     mostly non-reusable across roles; see internal typography doc).
  ============================================================ */

  /* Fixed sizes */
  --text-nav: 0.8125rem;          /* 13px */
  --text-dropdown: 0.8125rem;     /* 13px */
  --text-label-tight: 0.75rem;    /* 12px */
  --text-caption-long: 0.75rem;   /* 12px — same size as label-tight, different tracking */
  --text-label-loose: 0.875rem;   /* 14px */
  --text-legal: 0.625rem;         /* 10px */
  --text-body: 0.875rem;          /* 14px desktop */
  --text-body-mobile: 0.9375rem;  /* 15px mobile step */
  --text-collection-small-label:0.6875rem;  /*11px*/

  /* Fluid role endpoints — combine with vw at point of use.
     Given as min/max only, not precomputed clamp(), so the
     slope term is always checked against the full 360–1440px
     range before shipping (this is what the 1024px inversion
     bug came from — a coefficient nobody re-checked at the seam). */
  --text-heading-section-min: 1.125rem;    /* 18px */
  --text-heading-section-max: 1.5rem;      /* 24px */
  --text-heading-philosophy-min: 1.25rem;  /* 20px */
  --text-heading-philosophy-max: 1.75rem;  /* 28px */
  --text-heading-contact-min: 2.2rem;      /* 35.2px */
  --text-heading-contact-max: 4.5rem;      /* 72px */

/* Product title: 21px @360 → 36px @1440 */
/* Endpoints only — compute clamp fresh at point of use */
--text-heading-product-title-min: 1.3125rem;  /* 21px */
--text-heading-product-title-max: 2.25rem;    /* 36px */
/* Verified formula: clamp(1.3125rem, 1rem + 1.389vw, 2.25rem) */

/* How to Order heading: 26px @360 → 56px @1440 */
--text-heading-order-min: 1.625rem;  /* 26px */
--text-heading-order-max: 3.5rem;    /* 56px */
/* Verified formula: clamp(1.625rem, 1rem + 2.778vw, 3.5rem) */

  /* Tracking (letter-spacing) */
  --tracking-nav: 0.14em;
  --tracking-dropdown: 0.1em;
  --tracking-label-tight: 0.20em;
  --tracking-caption-long: 0.14em;   /* not 0.20em — wraps to two lines, spreads too wide otherwise */
  --tracking-label-loose: 0.20em;
  --tracking-legal: 0.12em;
  --tracking-contact-details: 0.08em; /* email/phone — tighter than nav for readability */
  --tracking-tight: 0.01em; /* tightest step in the scale — used by .shop-title */

/* Added to tokens.css, alongside the existing typography tokens */

/* Page padding for product-forward templates — shop-all, all
   collection pages, and the product detail page. Deliberately
   tighter floor than the main site's --page-padding (used by
   index.html, contact, footer, nav) since these pages
   prioritize giving product photography maximum width on small
   screens. This is intentionally a separate token, not a
   replacement — the two curves diverge below ~700px and are not
   interchangeable. */
--page-padding-product: clamp(1.5rem, -0.29rem + 7.96vw, 6.875rem);
/* Resolves: 24px @360 → 44px @600 → 56px @768 → 76px @1024 → 110px @1440 */

/* SPACING CONVENTION
   External spacing (margin, gap between separate components/sections)
   should be equal to or greater than internal spacing (padding inside
   a single component). This keeps grouped content reading as one unit
   and separate content reading as distinct — e.g. if a card uses
   --space-4 padding internally, the gap between that card and its
   neighbor should be --space-4 or larger, not smaller. When adding
   new spacing values, use these tokens rather than inventing a new
   px/rem/vw value inline. */
--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-5: 1.5rem;   /* 24px */
--space-6: 2rem;     /* 32px */
--space-7: 3rem;     /* 48px */
--space-8: 4rem;     /* 64px */
--space-9: 4.5rem;  /* 72px */
--space-10: 8rem; /* 128px */

/* Shared max-width for collection pages' heading and content areas —
   Signature, Summer, Accessories only. Shop All and Product use
   different layouts and do not consume this token. */
--collection-max-width: 76.25rem; /* 1220px */

}