/*
 * ShopOS design tokens — v3 ("Bloom").
 *
 * Every ShopOS Core module consumes these variables. Change a value here and
 * it propagates to Cards, Swatches, Restock forms, Infinite Scroll skeletons,
 * and the admin dashboard. This file is the theme's design API and the
 * canonical value source; docs/DESIGN.md frontmatter mirrors it.
 *
 * Bloom keeps the v2 token architecture and changes values: terracotta
 * accent on slate ink, white paper cards on a cool-grey page, pill buttons,
 * 16px cards, one gentle spring for entrances (decisions §12).
 *
 * To override per-site: add a Customizer CSS rule (or a child stylesheet) that
 * redefines any of these on `:root` or `.shopos-theme`.
 *
 * Naming convention:
 *   --shopos-ui-<group>-<variant>[-<modifier>]
 *   group    = color | palette | text | space | radius | shadow | motion |
 *              overlay | card | input | button | badge | z
 *   variant  = semantic role (ink, paper, accent, danger, …) or scale step
 *   modifier = optional state (hover, muted, soft, …)
 */

:root,
.shopos-theme {
    /* --- Palette (raw) -------------------------------------------------- */
    --shopos-ui-palette-black:     #111111;
    --shopos-ui-palette-ink:       #2f3237;
    --shopos-ui-palette-ink-soft:  #4a4e55;
    --shopos-ui-palette-mute:      #676b71;   /* ink-muted — darkened from #75797f (4.38:1 on paper) so every §7.4 sanctioned pairing clears AA: 5.36 paper / 5.09 paper-soft / 4.96 page */
    --shopos-ui-palette-hairline:  #e7e6e9;
    --shopos-ui-palette-paper:     #ffffff;
    --shopos-ui-palette-paper-alt: #f9f9fa;
    --shopos-ui-palette-paper-dim: #f0f0f2;
    --shopos-ui-palette-page:      #f6f6f7;   /* the page surface — cards are paper ON page (§7.1) */
    --shopos-ui-palette-sand:      #f6e9e4;   /* DEPRECATED (v3): retired from sanctioned surfaces; aliased to the accent-soft tint. Remove after the Wave 2 sweep (2-minor sunset). */
    --shopos-ui-palette-gold:      #b5532f;   /* legacy NAME, current accent carrier — the Design panel writes this slot; value = Bloom terracotta */
    --shopos-ui-palette-forest:    #3f6b4f;   /* opt-in accent preset — deliberately NOT the success green */
    --shopos-ui-palette-red:       #b3273a;
    --shopos-ui-palette-green:     #3d7a5a;
    --shopos-ui-palette-amber:     #a86a1f;
    --shopos-ui-palette-info:      #47698c;

    /* --- Semantic colors -----------------------------------------------
     * The only colors modules consume. Accent-First (§3): the accent is
     * terracotta by default and swappable per store via the Design panel
     * (it repaints palette-gold). accent-soft DERIVES from the accent so
     * every preset keeps a correct tint pairing. Each status family
     * carries a -soft fill and a -text partner that is the ONLY legal
     * text color on that fill (contrast-verified ≥4.5:1). */
    --shopos-ui-color-ink:          var(--shopos-ui-palette-ink);
    --shopos-ui-color-ink-muted:    var(--shopos-ui-palette-mute);
    --shopos-ui-color-ink-soft:     var(--shopos-ui-palette-ink-soft);
    --shopos-ui-color-page:         var(--shopos-ui-palette-page);
    --shopos-ui-color-paper:        var(--shopos-ui-palette-paper);
    --shopos-ui-color-paper-soft:   var(--shopos-ui-palette-paper-alt);
    --shopos-ui-color-paper-dim:    var(--shopos-ui-palette-paper-dim);
    --shopos-ui-color-hairline:     var(--shopos-ui-palette-hairline);
    --shopos-ui-color-accent:       var(--shopos-ui-palette-gold);
    --shopos-ui-color-accent-soft:  color-mix(in srgb, var(--shopos-ui-color-accent) 12%, var(--shopos-ui-color-paper));
    --shopos-ui-color-accent-text:  var(--shopos-ui-palette-paper);
    --shopos-ui-color-accent-hover: color-mix(in srgb, var(--shopos-ui-color-accent) 88%, #000);
    --shopos-ui-color-accent-active:color-mix(in srgb, var(--shopos-ui-color-accent) 78%, #000);
    --shopos-ui-color-danger:       var(--shopos-ui-palette-red);
    --shopos-ui-color-danger-soft:  #fbe4e7;
    --shopos-ui-color-danger-text:  #8c1e2d;   /* text on danger-soft — ≥4.5:1 */
    --shopos-ui-color-success:      var(--shopos-ui-palette-green);
    --shopos-ui-color-success-soft: #e0efe7;
    --shopos-ui-color-success-text: #2c5f45;   /* text on success-soft — ≥4.5:1 */
    --shopos-ui-color-warning:      var(--shopos-ui-palette-amber);
    --shopos-ui-color-warning-soft: #f9ecd9;
    --shopos-ui-color-warning-text: #7a4d13;   /* text on warning-soft — ≥4.5:1 */
    --shopos-ui-color-info:         var(--shopos-ui-palette-info);
    --shopos-ui-color-info-soft:    #e3ebf2;
    --shopos-ui-color-info-text:    #35516d;   /* text on info-soft — ≥4.5:1 */

    /* --- Typography ----------------------------------------------------
     * ONE family (Heebo). --shopos-ui-font-display is an alias of font-body,
     * retained for API compatibility so existing module CSS doesn't break.
     * Body follows Elementor's global typography (Style Kits writes the
     * `--e-global-typography-*` vars); the hardcoded stack is the fallback.
     * `sk_type_12` is the Style Kits "Body" slot. Mono stays a fixed stack. */
    --shopos-ui-font-body:    var(--e-global-typography-sk_type_12-font-family, 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --shopos-ui-font-display: var(--shopos-ui-font-body);
    --shopos-ui-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Fluid type scale (clamped between min screen and ~1600px). */
    --shopos-ui-text-xs:      clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);    /* 12→13px  label / badge / meta */
    --shopos-ui-text-sm:      clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem); /* 13→15px  small / caption / button */
    --shopos-ui-text-md:      clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);     /* 15→17px  body (default) */
    --shopos-ui-text-lg:      clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);  /* 18→21px  title / H4 */
    --shopos-ui-text-xl:      clamp(1.375rem, 1.22rem + 0.8vw, 1.875rem);    /* 22→30px  H3 */
    --shopos-ui-text-xxl:     clamp(1.875rem, 1.5rem + 1.9vw, 3rem);         /* 30→48px  H2 */
    --shopos-ui-text-hero:    clamp(2.5rem, 1.75rem + 3.8vw, 5rem);          /* 40→80px  H1 */
    --shopos-ui-text-display: clamp(3.25rem, 2.1rem + 5.8vw, 7.5rem);        /* 52→120px statement — ≤1 per page */

    --shopos-ui-leading-flat:  1.05;   /* display only  (:lang(he) → 1.1) */
    --shopos-ui-leading-tight: 1.15;   /* hero–xl headings  (:lang(he) → 1.2) */
    --shopos-ui-leading-snug:  1.35;   /* titles */
    --shopos-ui-leading-base:  1.6;    /* body */
    --shopos-ui-leading-loose: 1.8;

    --shopos-ui-tracking-tight:  -0.02em;  /* Latin, hero/display only (zeroed under :lang(he)) */
    --shopos-ui-tracking-normal: 0;
    --shopos-ui-tracking-wide:   0;        /* DEPRECATED (v3): pinned 0 — No-Uppercase rule, tracked labels are gone. Kept so stale var() fallbacks (0.04em) can't resurrect tracking; remove after the Wave 2 sweep. */

    --shopos-ui-weight-light:   300;
    --shopos-ui-weight-regular: 400;
    --shopos-ui-weight-medium:  500;
    --shopos-ui-weight-semi:    600;
    --shopos-ui-weight-bold:    700;

    /* --- Spacing scale (component rhythm, static) ---------------------- */
    --shopos-ui-space-0:   0;
    --shopos-ui-space-xxs: 2px;
    --shopos-ui-space-xs:  4px;
    --shopos-ui-space-sm:  8px;
    --shopos-ui-space-md:  16px;
    --shopos-ui-space-lg:  24px;
    --shopos-ui-space-xl:  40px;
    --shopos-ui-space-xxl: 64px;
    --shopos-ui-space-3xl: 96px;

    /* --- Radii — the shape ladder (Pill-Is-Identity, §8.1) -------------
     * pill=buttons/chips/badges, xs=inputs/selects/textareas/thumbnails,
     * md=cards/panels/popovers, lg=modals/sheets/drawers,
     * round=icon buttons/swatch dots/count bubbles.
     * Radius never animates and never changes between states. */
    --shopos-ui-radius-xs:    12px;
    --shopos-ui-radius-md:    16px;
    --shopos-ui-radius-lg:    24px;
    --shopos-ui-radius-pill:  999px;
    --shopos-ui-radius-round: 50%;

    /* --- Shadows — slate-tinted; Soft-At-Rest (§3) ---------------------- */
    --shopos-ui-shadow-xs: 0 1px 1px rgba(47,50,55,0.04);
    --shopos-ui-shadow-sm: 0 1px 2px rgba(47,50,55,0.05);   /* interactive card at rest */
    --shopos-ui-shadow-md: 0 2px 6px rgba(47,50,55,0.06), 0 12px 32px rgba(47,50,55,0.10);
    --shopos-ui-shadow-lg: 0 24px 64px rgba(47,50,55,0.18); /* drawers, modals, toasts */
    --shopos-ui-shadow-xl: 0 40px 80px rgba(47,50,55,0.24); /* full-screen overlays only */
    --shopos-ui-shadow-inset: inset 0 0 0 1px var(--shopos-ui-color-hairline);

    /* --- Motion — One Gentle Spring (§8.6) ------------------------------
     * fast+ease = the 160ms standard move (hover, tint, press).
     * base+ease-spring = the 260ms entrance with slight overshoot.
     * Nothing bounces twice; reduced-motion collapses everything. */
    --shopos-ui-motion-instant: 90ms;
    --shopos-ui-motion-fast:    160ms;
    --shopos-ui-motion-base:    260ms;
    --shopos-ui-motion-slow:    480ms;
    --shopos-ui-ease:           cubic-bezier(0.2, 0.6, 0.2, 1);
    --shopos-ui-ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
    --shopos-ui-ease-in:        cubic-bezier(0.4, 0, 1, 1);
    --shopos-ui-ease-spring:    cubic-bezier(0.34, 1.3, 0.64, 1);   /* entrances/reveals ONLY */
    --shopos-ui-motion-spin:    0.8s;   /* full-rotation loop for spinners; intentionally NOT zeroed by reduced-motion */

    /* --- Overlay / scrim ---------------------------------------------- */
    --shopos-ui-overlay-scrim:  rgba(47, 50, 55, 0.45);
    --shopos-ui-overlay-blur:   2px;

    /* --- Card primitives ---------------------------------------------- */
    --shopos-ui-card-radius:       var(--shopos-ui-radius-md);
    --shopos-ui-card-gap:          var(--shopos-ui-space-lg);
    /* Two ratios, deliberately (§11). The loop/archive card is 3:4 — taller,
       so a garment reads at grid scale. The PDP gallery stays 4:5, where the
       image already has the width to carry it. The board draws exactly this
       split: 3/4 on every loop card, 4/5 on all eight #product-page-* media
       boxes. One token per ratio, so re-pointing a surface is a name change
       and never a silent restyle of the other. */
    --shopos-ui-card-aspect:       3 / 4;
    /* Media-box pixel height, the Design panel's "Fixed height" ratio mode.
       `auto` — the default — means the ratio above governs; a pixel value
       makes both axes definite, the aspect is emitted as `auto` alongside it
       and the fit is pinned to cover (a fixed height against a fluid width
       letterboxes under contain — the .cs-fixed-h lesson). */
    --shopos-ui-card-h:            auto;
    /* The loop card's mat width. 0 is the honest default — most cards bleed
       their media to the edge. The §12.3 framed card raises it locally to
       space-sm, and the corner affordances (QuickView trigger, quick-buy FAB)
       read it to stay put over the picture instead of over the frame. */
    --shopos-ui-card-frame:        0px;
    --shopos-ui-gallery-aspect:    4 / 5;
    /* How a product photo meets its media box. `contain` shows the whole
       product and mats the remainder with --shopos-ui-card-plate; `cover`
       fills the box and crops. Owner-settable (ShopOS → Design), because
       which one is right depends on how a store shoots its catalogue —
       square-cropped studio shots want cover, mixed-ratio supplier imagery
       wants contain. Default contain (owner ruling 2026-08-11). Only the
       ratio-boxed surfaces read it; the fixed-height slider mode pins cover
       (see product-slider.css). */
    --shopos-ui-card-fit:          contain;
    --shopos-ui-card-plate:        var(--shopos-ui-color-paper-dim);
    --shopos-ui-card-bg:           var(--shopos-ui-color-paper);
    --shopos-ui-card-border:       1px solid var(--shopos-ui-color-hairline);
    --shopos-ui-card-border-hover: 1px solid var(--shopos-ui-color-hairline);
    --shopos-ui-card-shadow:       var(--shopos-ui-shadow-sm);
    --shopos-ui-card-shadow-hover: var(--shopos-ui-shadow-md);
    --shopos-ui-card-hover-shift:  -2px;

    /* --- Form / input primitives -------------------------------------- */
    --shopos-ui-input-height:      44px;
    --shopos-ui-input-height-sm:   36px;
    --shopos-ui-input-radius:      var(--shopos-ui-radius-xs);
    --shopos-ui-input-bg:          var(--shopos-ui-color-paper);
    --shopos-ui-input-border:      1px solid color-mix(in srgb, var(--shopos-ui-color-ink) 16%, transparent);
    --shopos-ui-input-border-hover:1px solid color-mix(in srgb, var(--shopos-ui-color-ink) 30%, transparent);
    --shopos-ui-input-padding-x:   var(--shopos-ui-space-md);
    --shopos-ui-focus-outline:     2px solid var(--shopos-ui-color-ink);

    /* --- Button primitives -------------------------------------------- */
    --shopos-ui-button-height:       44px;
    --shopos-ui-button-height-sm:    36px;
    --shopos-ui-button-radius:       var(--shopos-ui-radius-pill);
    --shopos-ui-button-padding-x:    var(--shopos-ui-space-lg);
    --shopos-ui-button-font-weight:  var(--shopos-ui-weight-semi);
    --shopos-ui-button-tracking:     var(--shopos-ui-tracking-normal);

    /* --- Badge primitives --------------------------------------------- */
    --shopos-ui-badge-height:   22px;
    --shopos-ui-badge-radius:   var(--shopos-ui-radius-pill);
    --shopos-ui-badge-padding:  0 12px;
    --shopos-ui-badge-font:     var(--shopos-ui-text-xs);

    /* --- Layout — page rhythm is FLUID (air scales with the viewport) -- */
    --shopos-ui-container-max:   1360px;
    --shopos-ui-container-wide:  1560px;                              /* hero, PLP grid, editorial bands */
    --shopos-ui-container-pad:   clamp(1rem, 0.5rem + 2.5vw, 3rem);   /* 16→48px gutters */
    --shopos-ui-section-gap:     clamp(4rem, 1.2rem + 6.5vw, 8rem);   /* 64→128px between sections */
    --shopos-ui-drawer-width:    min(480px, 94vw);  /* off-canvas panels: QuickView, filters drawer */
    --shopos-ui-swatch-size:     28px;              /* filter chip + archive variation swatch (PDP swatches keep the 44px touch floor) */
    --shopos-ui-measure:         65ch;              /* readable line length for body copy */

    /*
     * Canonical breakpoints. CSS custom properties CANNOT be used inside a
     * @media query, so these are reference values only — the single source of
     * truth modules copy into their media queries / JS matchMedia calls, kept
     * here so the numbers stop drifting per-module. tablet=1024px, mobile=640px.
     */
    --shopos-ui-bp-tablet:       1024px;
    --shopos-ui-bp-mobile:       640px;

    /* --- Z-stack ------------------------------------------------------- */
    --shopos-ui-z-card:    1;
    --shopos-ui-z-sticky:  100;
    --shopos-ui-z-overlay: 5000;
    --shopos-ui-z-modal:   10000;
    --shopos-ui-z-toast:   10100;
    --shopos-ui-z-max:     99999;
}

/*
 * Accent themes — DEPRECATED (v3, 2-minor sunset). The Design panel is the
 * accent write-path (it repaints --shopos-ui-palette-gold); these body-class
 * presets remain only for stores that applied them by hand. accent-soft is
 * not set here — it derives from the accent automatically.
 */
.shopos-theme.is-accent-ink {
    --shopos-ui-color-accent:      var(--shopos-ui-palette-ink);
    --shopos-ui-color-accent-text: var(--shopos-ui-palette-paper);
}
.shopos-theme.is-accent-gold {
    --shopos-ui-color-accent:      var(--shopos-ui-palette-gold);
    --shopos-ui-color-accent-text: #ffffff;
}
.shopos-theme.is-accent-forest {
    --shopos-ui-color-accent:      var(--shopos-ui-palette-forest);
    --shopos-ui-color-accent-text: #ffffff;
}

/*
 * Inverted surfaces — add .is-inverted on any section to remap the semantic
 * color slots (dynamic range without a dark mode). Paper becomes slate ink,
 * the ink ramp becomes a paper ramp, hairlines become translucent white.
 * v3: the ACCENT is deliberately NOT remapped — Accent-First holds on slate,
 * so the primary button stays terracotta inside the band; accent-soft remaps
 * to a white tint so TINT hovers stay tonal on ink. The focus ring reads
 * color-ink, so it flips to white for free. Invert by remap, never by
 * writing dark variants. Footer is always inverted; ≤1 band per page.
 */
.shopos-theme .is-inverted,
.is-inverted {
    --shopos-ui-color-ink:         #ffffff;
    --shopos-ui-color-ink-soft:    #d8dade;
    --shopos-ui-color-ink-muted:   #b9bcc1;   /* ≥4.5:1 on the slate surface */
    --shopos-ui-color-paper:       var(--shopos-ui-palette-ink);
    --shopos-ui-color-paper-soft:  #383c42;
    --shopos-ui-color-paper-dim:   #42464d;
    --shopos-ui-color-hairline:    rgba(255,255,255,0.16);
    --shopos-ui-color-accent-soft: rgba(255,255,255,0.12);
}

/*
 * High-contrast preference — collapses shadows and increases border weight.
 */
@media (prefers-contrast: more) {
    .shopos-theme {
        --shopos-ui-card-border:       1px solid var(--shopos-ui-color-ink);
        --shopos-ui-card-border-hover: 2px solid var(--shopos-ui-color-ink);
        --shopos-ui-card-shadow:       none;
        --shopos-ui-card-shadow-hover: none;
        --shopos-ui-input-border:      1px solid var(--shopos-ui-color-ink);
        --shopos-ui-focus-outline:     3px solid var(--shopos-ui-color-ink);
    }
}

/*
 * Reduced-motion preference — collapses motion durations so any transition
 * that references --shopos-ui-motion-* becomes effectively instant (the
 * gentle spring included: a 0ms entrance has no overshoot to show).
 */
@media (prefers-reduced-motion: reduce) {
    .shopos-theme {
        --shopos-ui-motion-instant: 0ms;
        --shopos-ui-motion-fast:    0ms;
        --shopos-ui-motion-base:    0ms;
        --shopos-ui-motion-slow:    0ms;
    }
}