/* ============================================================================
   MAISON — Design Tokens
   Single source of truth for the WordPress/WooCommerce theme + interaction islands.
   Enqueue globally (wp_enqueue_style) BEFORE theme.css and any island CSS.
   Values mirror the Maison.dc.html prototype 1:1.
   ---------------------------------------------------------------------------
   Usage:  color: var(--c-ink);  font: var(--t-h2);  gap: var(--sp-4);
   Do not hard-code hex/px in components — always reference a token.
============================================================================ */

:root {
  /* ---- COLOR · surfaces & neutrals ------------------------------------- */
  --c-paper:      #FAF6EF; /* page background (warm off-white)               */
  --c-surface:    #FFFFFF; /* cards, panels, inputs                         */
  --c-tint:       #F2EADD; /* section wash / hover fill                     */
  --c-sand:       #E9DECB; /* image placeholder base                        */
  --c-ink:        #241F1A; /* primary text, footer bg                       */
  --c-ink-2:      #5C544A; /* secondary text                               */
  --c-muted:      #978C7E; /* tertiary text / meta                          */
  --c-line:       #E8DECF; /* hairline borders                             */
  --c-line-2:     #D8CCB8; /* stronger borders, inputs                      */
  --c-camel:      #B98A54; /* warm metallic accent (sparing)               */

  /* ---- COLOR · brand accent (burgundy) --------------------------------- */
  /* The three-stop accent is themeable. Keep contrast >= 4.5:1 on paper.   */
  --c-wine:       #6E2233; /* primary accent — buttons, links, active       */
  --c-wine-hover: #86293D; /* lighter hover for accent surfaces             */
  --c-wine-deep:  #4C1826; /* pressed / hover on solid accent buttons       */
  --c-on-wine:    #FFFFFF; /* text on accent                                */
  --c-cream:      #F3E7D9; /* text/ink used on accent bands                 */

  /* ---- COLOR · footer scale (on --c-ink) ------------------------------- */
  --c-foot-text:  #CFC6B8;
  --c-foot-muted: #A99E8E;
  --c-foot-faint: #877C6C;
  --c-foot-line:  rgba(55,48,38,0.40);

  /* ---- COLOR · product swatches (filter colour facet) ------------------ */
  --sw-black:     #211D1A;
  --sw-brown:     #6E4A2E;
  --sw-tan:       #B4854F;
  --sw-beige:     #DAC7A4;
  --sw-white:     #F1ECE1;
  --sw-red:       #9A2B2B;
  --sw-pink:      #D6A0AB;
  --sw-blue:      #33506C;
  --sw-green:     #3C5A47;
  --sw-metallic:  #B7B1A7;

  /* ---- COLOR · semantic ------------------------------------------------ */
  --c-focus-ring: var(--c-wine);
  --c-selection-bg: var(--c-wine);
  --c-selection-fg: #FFFFFF;

  /* ---- TYPE · families ------------------------------------------------- */
  --f-serif: "Bodoni Moda", Georgia, "Times New Roman", serif; /* display   */
  --f-sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* UI  */
  --f-mono:  "DM Mono", ui-monospace, "SF Mono", monospace; /* overline/meta */

  /* ---- TYPE · roles (font shorthand: weight size/line family) ---------- */
  --t-display: 500 clamp(40px,6.4vw,86px)/1.02 var(--f-serif); /* hero h1    */
  --t-h1:      500 clamp(30px,4.2vw,52px)/1.08 var(--f-serif);
  --t-h2:      500 clamp(26px,3.2vw,44px)/1.12 var(--f-serif);
  --t-h3:      500 20px/1.2 var(--f-serif);
  --t-serif-lg: 500 clamp(20px,2.6vw,32px)/1.15 var(--f-serif); /* card feat */
  --t-price:   600 clamp(15px,1.4vw,26px)/1.2 var(--f-sans);
  --t-body:    400 15px/1.55 var(--f-sans);
  --t-body-lg: 400 16.5px/1.65 var(--f-sans);
  --t-small:   400 13px/1.5 var(--f-sans);
  --t-ui:      500 12.5px/1.2 var(--f-sans); /* nav, buttons                 */
  /* overline / eyebrow / meta — always uppercase + letter-spacing          */
  --t-over:    400 10.5px/1.2 var(--f-mono);
  --t-over-sm: 400 9px/1.2 var(--f-mono);

  --ls-over:   0.18em; /* overline tracking                                  */
  --ls-over-wide: 0.24em;
  --ls-wordmark: 0.24em;
  --ls-ui:     0.03em;
  --ls-btn:    0.06em;

  /* ---- SPACING · 4px base scale ---------------------------------------- */
  --sp-0: 0;     --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px; --sp-7: 32px;  --sp-8: 40px; --sp-9: 48px;
  --sp-10: 64px; --sp-11: 80px;
  /* fluid section rhythm */
  --sp-section:  clamp(48px, 6vw, 84px); /* vertical section padding        */
  --sp-gutter:   clamp(20px, 4vw, 40px); /* page horizontal gutter          */
  --gap-grid:    clamp(14px, 1.6vw, 22px); /* product grid gap              */

  /* ---- LAYOUT · container widths --------------------------------------- */
  --w-max:      1640px; /* full site frame (home, PLP)                       */
  --w-content:  1240px; /* account, cart, blog                              */
  --w-pdp:      1400px; /* product detail                                    */
  --w-read:     760px;  /* article / legal reading measure                   */
  --w-sidebar:  268px;  /* PLP filter rail                                   */
  --w-acct-nav: 224px;  /* account / page side nav                           */
  --h-header:      88px; /* header at rest                                   */
  --h-header-cmp:  62px; /* header when scrolled                             */
  --top-sticky:    104px; /* sticky offset below header                      */

  /* ---- RADIUS ---------------------------------------------------------- */
  --r-xs: 2px;  /* buttons, inputs, badges (sharp, editorial)               */
  --r-sm: 3px;
  --r-md: 4px;  /* thumbnails                                                */
  --r-lg: 5px;  /* product image cards                                       */
  --r-xl: 6px;  /* panels, hero image, promo bands                           */
  --r-pill: 999px; /* chips, colour swatches, count badges                   */

  /* ---- BORDERS --------------------------------------------------------- */
  --b-hair:   1px solid var(--c-line);
  --b-line:   1px solid var(--c-line-2);
  --b-check:  1.5px solid var(--c-line-2); /* checkbox / control rest        */
  --b-active: 2px solid var(--c-wine);     /* selected swatch / thumb        */
  --b-input:  1px solid var(--c-line-2);

  /* ---- SHADOWS (warm, low-spread, luxe) -------------------------------- */
  --sh-card:   0 26px 50px -26px rgba(60,35,25,0.42); /* card hover lift     */
  --sh-float:  0 24px 50px -26px rgba(60,35,25,0.40); /* floating chip       */
  --sh-panel:  0 20px 38px -22px rgba(60,35,25,0.40); /* dropdown/panel      */
  --sh-hero:   0 40px 80px -40px rgba(60,35,25,0.50); /* hero image          */
  --sh-drawer: -30px 0 60px -30px rgba(35,22,16,0.40); /* slide-over         */
  --sh-search: 0 30px 60px -30px rgba(35,22,16,0.50); /* search sheet        */

  /* ---- MOTION ---------------------------------------------------------- */
  --dur-1: 120ms; /* micro (checkbox, dot)                                   */
  --dur-2: 200ms; /* default control                                        */
  --dur-3: 250ms;
  --dur-4: 300ms; /* buttons, color                                         */
  --dur-5: 400ms; /* drawers                                                 */
  --dur-6: 500ms; /* card lift, fades                                        */
  --dur-slow: 800ms; /* image zoom                                          */
  --ease-standard: cubic-bezier(0.4, 0, 0.1, 1);   /* header, general        */
  --ease-drawer:   cubic-bezier(0.2, 0.7, 0.2, 1); /* slide-overs            */
  --ease-image:    cubic-bezier(0.19, 0.72, 0.23, 1); /* image scale         */

  /* ---- Z-INDEX (reserve this scale; islands must not exceed) ----------- */
  --z-header:      60;
  --z-drawer-nav:  90;  /* mobile menu                                       */
  --z-quickview:   95;  /* quick-view + mobile filter drawer                 */
  --z-search:      98;  /* search overlay                                    */
  --z-lightbox:    99;  /* PDP zoom                                          */
}

/* ---------------------------------------------------------------------------
   BREAKPOINTS (JS islands read the same thresholds)
   mobile   : max-width 759px      (grid 2-col, drawers, stacked)
   tablet   : 760px – 1023px       (grid 3-col, no persistent sidebar)
   desktop  : min-width 1024px     (persistent filter rail, 4-col grid)
   wide-nav : min-width 900px      (full horizontal nav vs hamburger)
   Use container queries where possible; fall back to these media queries.
--------------------------------------------------------------------------- */

/* ===========================================================================
   BUTTON STATES  (reference implementation — copy into theme.css)
   Three variants: .btn--primary (solid accent), .btn--secondary (outline),
   .btn--ghost (text). All share .btn base. Min hit target 44px.
=========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 16px 30px;
  font: var(--t-ui); letter-spacing: var(--ls-btn); text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-xs); cursor: pointer;
  transition: background var(--dur-4), color var(--dur-4),
              border-color var(--dur-4), transform var(--dur-4);
}
.btn:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }

.btn--primary   { background: var(--c-wine); color: var(--c-on-wine); }
.btn--primary:hover  { background: var(--c-wine-deep); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }
.btn--primary[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn--secondary  { background: transparent; color: var(--c-ink); border-color: var(--c-line-2); }
.btn--secondary:hover { color: var(--c-wine); border-color: var(--c-wine); }

.btn--ghost   { background: transparent; color: var(--c-ink-2); padding: 8px 0; min-height: 0; }
.btn--ghost:hover { color: var(--c-wine); }

/* Link with underline-grow (nav / inline) */
.link-ul { color: var(--c-ink-2); border-bottom: 1.5px solid transparent;
           transition: color var(--dur-3), border-color var(--dur-3); }
.link-ul:hover { color: var(--c-wine); border-color: var(--c-wine); }

/* ===========================================================================
   GLOBAL RESETS the prototype relies on
=========================================================================== */
*::selection { background: var(--c-selection-bg); color: var(--c-selection-fg); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
}

/* Keyframes used by islands (grid skeleton, drawers, search sheet) */
@keyframes maison-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes maison-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes maison-card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes maison-drawer-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes maison-drawer-left  { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes maison-search-drop  { from { transform: translateY(-26px); opacity: .5; } to { transform: none; opacity: 1; } }