/* ==========================================================================
   The Procuress — design tokens (canonical)
   Every colour, font, size, spacing, container, border, shadow and motion
   value used by the theme is declared here as a custom property. Components
   reference tokens only; they never declare raw values.

   Sources: README.md handoff, Procuress Design System.dc.html, and the six
   Salon / Collection exports.
   ========================================================================== */

@layer tokens, base, layout, components, woocommerce, utilities;

@layer tokens {
  :root {
    /* ---- Colour: paper / grounds ------------------------------------- */
    --tp-color-paper: #FAF8F3;          /* page background */
    --tp-color-paper-warm: #F6F0E2;     /* section grounds; mobile header/drawer at .97 */
    --tp-color-paper-hover: #F4EEE0;    /* outline-button hover fill */
    --tp-color-paper-well: #F2EEE4;     /* product image well */
    --tp-color-paper-dropdown-hover: #F6F1E4;
    --tp-color-parchment: #F1EAD9;      /* notes */
    --tp-color-frame: #FFFDF8;          /* collage frame border */
    --tp-color-card: rgba(252, 250, 244, 0.95);   /* hotspot tags, dropdown panel */
    --tp-color-header-bg: rgba(250, 248, 243, 0.97);
    --tp-color-drawer-bg: rgba(246, 240, 229, 0.97);
    --tp-color-badge-bg: rgba(250, 248, 243, 0.92);

    /* ---- Colour: blues ------------------------------------------------ */
    --tp-color-ink: #1E3A63;            /* navy: headings, links, primary button */
    --tp-color-cobalt: #2F5DA8;         /* hover, diamonds, arrows, active chip border */
    --tp-color-deep-blue: #0C3C7B;      /* taxonomy heading */
    --tp-color-powder: #C9D8E8;
    --tp-color-porcelain: #8FA9C8;
    --tp-color-chip-active: #EAF0F7;

    /* ---- Colour: brass / gold ----------------------------------------- */
    --tp-color-brass: #B08D4F;          /* 1px lines, active underline, star, arrows */
    --tp-color-brass-light: #C9B27C;    /* micro rules, card hover border */
    --tp-color-brass-soft: #D9C79B;     /* form borders, footer rules */
    --tp-color-brass-rule: #C0AE84;     /* hairline inside tags */
    --tp-color-brass-border: #CBB98D;   /* tag / dropdown border */
    --tp-color-brass-drawer: #D8C9A6;
    /* Phase 9 — the three gold values below are the only ones used as TEXT.
       At 9.5–10.5px on parchment the design's #9A8A63 / #8A7A56 / #B08D4F
       measured 2.8–4.0:1, short of WCAG AA's 4.5:1 for body-size type. Each is
       darkened along its own hue and saturation until it clears 4.5:1 on the
       darkest ground it appears on (#EFE7D6, The Particulars). The brass RULES
       are untouched: a hairline is not text, and a new text-only token keeps
       the two apart. */
    --tp-color-gold-text: #73674A;      /* eyebrows, meta, footer labels (was #9A8A63) */
    --tp-color-gold-text-deep: #635840; /* item-number tab, zoom meta (was #8A7A56) */
    --tp-color-brass-text: #7D6538;     /* brass as type, never as a rule (was #B08D4F) */

    /* ---- Colour: text ------------------------------------------------- */
    --tp-color-text: #2A2723;           /* default body / nav */
    --tp-color-text-body: #3C3A34;      /* italic editorial copy */
    --tp-color-text-muted: #6E6858;     /* card sub-lines, inactive chips */
    --tp-color-text-system: #6E6A5F;
    --tp-color-charcoal: #1E1D1B;
    --tp-color-tagline-mobile: #34322C;

    /* ---- Colour: lines ------------------------------------------------ */
    --tp-color-line: #E2D6B8;           /* header/footer/section rules */
    --tp-color-line-soft: #EDE6D4;      /* spec rows, drawer items, dropdown items */
    --tp-color-line-well: #E6DECB;      /* product image well border */
    --tp-color-line-drawer: #E4DBC4;    /* drawer bottom border */
    --tp-color-line-system: #E2D9C4;
    --tp-color-line-zoom: #E0D6BC;
    --tp-color-nav-pipe: #C9BFA8;

    /* ---- Type: families & weights ------------------------------------- */
    --tp-font-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
    --tp-font-mono: 'Courier Prime', 'Courier New', Courier, monospace;
    --tp-font-hand: 'Petit Formal Script', 'Cormorant Garamond', cursive;
    --tp-weight-light: 300;
    --tp-weight-regular: 400;
    --tp-weight-medium: 500;
    --tp-weight-semibold: 600;
    --tp-weight-bold: 700;

    /* ---- Type: size scale --------------------------------------------- */
    --tp-size-label-xs: 9px;
    --tp-size-label-s: 9.5px;
    --tp-size-label: 10px;
    --tp-size-label-l: 10.5px;
    --tp-size-label-xl: 11px;
    --tp-size-nav: 12px;
    --tp-size-nav-tablet: 11px;
    --tp-size-nav-mobile: 12px;
    --tp-size-wordmark: 10.5px;
    --tp-size-meta: 14px;
    --tp-size-input: 15px;
    --tp-size-body-s: 15px;
    --tp-size-body: 17px;
    --tp-size-body-m: 18px;
    --tp-size-body-l: 19px;
    --tp-size-note: 16px;
    --tp-size-card-title: 18px;
    --tp-size-card-title-l: 19px;
    --tp-size-link-l: 19px;
    --tp-size-link-m: 17px;
    --tp-size-link-s: 16px;
    --tp-size-h2: clamp(23px, 2.4vw, 34px);
    --tp-size-h2-editorial: clamp(24px, 2.6vw, 40px);
    --tp-size-h2-related: 26px;
    --tp-size-h1-grid: clamp(25px, 2.7vw, 40px);
    --tp-size-h1-product: clamp(25px, 2.6vw, 38px);
    --tp-size-h1-zoom: clamp(30px, 3.4vw, 54px);
    --tp-size-h1-editorial: clamp(34px, 5vw, 68px);
    --tp-size-newsletter: clamp(18px, 1.8vw, 25px);
    --tp-size-newsletter-tablet: 19px;
    --tp-size-newsletter-mobile: 19px;

    /* ---- Type: tracking ----------------------------------------------- */
    --tp-track-tight: 0.02em;
    --tp-track-title: 0.06em;
    --tp-track-h: 0.1em;
    --tp-track-button: 0.12em;
    --tp-track-nav: 0.13em;
    --tp-track-meta: 0.14em;
    --tp-track-chip: 0.16em;
    --tp-track-nav-header: 0.18em;
    --tp-track-cta: 0.18em;
    --tp-track-wide: 0.2em;
    --tp-track-label: 0.22em;
    --tp-track-eyebrow: 0.24em;

    /* ---- Type: leading ------------------------------------------------ */
    --tp-leading-none: 1;
    --tp-leading-tight: 1.1;
    --tp-leading-heading: 1.14;
    --tp-leading-snug: 1.35;
    --tp-leading-newsletter: 1.4;
    --tp-leading-body: 1.6;
    --tp-leading-editorial: 1.75;

    /* ---- Spacing ------------------------------------------------------ */
    --tp-space-1: 4px;
    --tp-space-2: 8px;
    --tp-space-3: 12px;
    --tp-space-4: 16px;
    --tp-space-5: 20px;
    --tp-space-6: 24px;
    --tp-space-7: 30px;
    --tp-space-8: 34px;
    --tp-space-9: 42px;
    --tp-space-10: 58px;
    --tp-space-11: 78px;
    --tp-gutter: 42px;                  /* page gutter: 42 desktop / 26 tablet / 20 mobile */

    /* ---- Containers & measures ---------------------------------------- */
    --tp-container: 1280px;
    --tp-mobile-column: 520px;
    --tp-measure: 46ch;
    --tp-measure-product: 48ch;
    --tp-measure-wide: 62ch;
    --tp-footer-brand-width: 186px;
    --tp-footer-logo-width: 152px;
    --tp-footer-logo-width-mobile: 158px;
    --tp-header-logo-width: 132px;
    --tp-header-logo-width-tablet: 104px;
    --tp-tap-target: 44px;

    /* Breakpoints (documented here; media queries must use the literals):
       mobile  < 700px
       tablet  700px – 1099px
       desktop ≥ 1100px */

    /* ---- Borders & radius --------------------------------------------- */
    --tp-border-width: 1px;
    --tp-border: 1px solid var(--tp-color-line);
    --tp-border-soft: 1px solid var(--tp-color-line-soft);
    --tp-border-brass: 1px solid var(--tp-color-brass);
    --tp-border-brass-soft: 1px solid var(--tp-color-brass-soft);
    --tp-radius: 0;                     /* square, archival — never overridden */

    /* ---- Shadows ------------------------------------------------------ */
    --tp-shadow-rest: 0 2px 2px rgba(60, 45, 25, 0.02);
    --tp-shadow-card: 0 14px 28px rgba(65, 50, 30, 0.09);
    --tp-shadow-lift: 0 12px 22px rgba(30, 58, 99, 0.22);
    --tp-shadow-frame: 0 14px 34px rgba(30, 58, 99, 0.14);
    --tp-shadow-tag: 0 4px 10px rgba(30, 58, 99, 0.14);
    --tp-shadow-tag-mobile: 0 3px 8px rgba(30, 58, 99, 0.13);
    --tp-shadow-dropdown: 0 6px 16px rgba(30, 58, 99, 0.16);
    --tp-shadow-drop-warm: 0 12px 22px rgba(60, 45, 25, 0.18);
    --tp-shadow-field-note: 0 10px 26px rgba(30, 58, 99, 0.13);

    /* ---- Motion ------------------------------------------------------- */
    --tp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --tp-ease-zoom: cubic-bezier(0.62, 0.02, 0.24, 1);
    --tp-dur-fast: 0.18s;
    --tp-dur-dropdown: 0.22s;
    --tp-dur-drawer: 0.35s;
    --tp-dur: 0.3s;
    --tp-dur-view: 0.55s;
    --tp-dur-zoom: 1.15s;

    /* ---- Buttons ------------------------------------------------------ */
    --tp-btn-h-primary: 56px;
    --tp-btn-h-cta: 58px;
    --tp-btn-h-load-more: 54px;
    --tp-btn-h-secondary: 48px;
    --tp-btn-h-toolbar: 44px;
    --tp-btn-h-chip: 42px;
    --tp-btn-h-filter-chip: 38px;
    --tp-btn-h-footer: 38px;
    --tp-btn-h-signup: 40px;
    --tp-btn-w-footer: 186px;
    --tp-qty-btn-w: 46px;
    --tp-qty-btn-h: 48px;
  }

  @media (max-width: 1099px) {
    :root {
      --tp-gutter: 26px;
    }
  }

  @media (max-width: 699px) {
    :root {
      --tp-gutter: 20px;
    }
  }
}

  /* How far below the viewport top an editorial page's plate band begins —
     the sticky header's own height. A `band` destination paints its crop into
     a box starting here, not at 0, so the Salon transition has to aim there or
     the artwork reframes at the handoff. Published as a token because the
     Salon needs the EDITORIAL header's height while rendering its own. Keep in
     step with .tp-header's heights in GlobalHeader.css. */
  :root { --tp-editorial-band-top: 6.6vw; }

  @media (max-width: 1099px) {
    :root { --tp-editorial-band-top: 50px; }
  }

  @media (max-width: 699px) {
    :root { --tp-editorial-band-top: 57px; }
  }