/* ==========================================================================
   Alevectis Commerce theme tokens, wired to the settings.

   WHERE THE VALUES COME FROM
   Alevectis Commerce Core prints one inline <style id="alevectis-commerce-core-tokens">:root{--k-color-*}
   at wp_head 5, BEFORE this file.  Those are the owner's
   choices from the design panel, already passed through the contrast guard.
   This file maps them onto the theme's own token names, so every component
   below keeps the names it was designed with and a colour, font or shape chosen
   in the panel restyles the whole site.

   Every mapping carries the theme's literal value as its fallback, so the
   theme renders complete when the plugin is inactive.

   Tiers:
     plugin tokens (--k-color-*, --k-font-*, --k-radius-control, --k-logo-width*)
       act as the primitive tier: raw values the owner set;
     --k-c-*  the theme's primitives, now aliases of the plugin's values;
     --k-bg-* / --k-text* / --k-line* / --k-action* / --k-accent*  semantic roles.

   --k-font-display and --k-font-text carry the SAME name in the plugin and the
   template, so their fallback is declared on :where(:root), whose specificity
   is zero: the plugin's :root block always wins, whatever the load order.

   @package Alevectis Commerce
   @author Alevectis <https://alevectis.co.il>
   @copyright 2026 Alevectis
   @license GPL-2.0-or-later
   ========================================================================== */

:where(:root) {
  --k-font-display: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-font-text:    'Noto Sans Hebrew', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

:root {
  /* ---- primitive: the ink ramp, from the plugin's derived near-neutrals
         (biased toward the brand hue by the plugin, as the defaults were) */
  --k-c-ink-900: var(--k-color-text, #111517);
  --k-c-ink-800: #1B2123;                         /* replaced below where color-mix exists */
  --k-c-ink-600: var(--k-color-text-muted, #55605F);
  --k-c-ink-500: var(--k-color-text-muted, #66716F);
  --k-c-ink-400: var(--k-color-border-strong, #7C8785);  /* a control's own boundary, 3:1 */
  --k-c-ink-200: #C7CECC;                         /* replaced below where color-mix exists */
  --k-c-ink-100: var(--k-color-border, #E3E7E5);
  --k-c-ink-050: var(--k-color-ground-raised, #F4F6F5);
  --k-c-white:   #FFFFFF;

  /* ---- primitive: the brand, as text-safe ink and as the owner's own fill */
  --k-c-brand-600: var(--k-color-brand-ink, #1C5F4D);    /* the theme's re-skin token */
  --k-c-sale-600:  #9E2B25;
  --k-c-sale-100:  #FBEDEC;

  /* ---- semantic: ground */
  --k-bg-page:    var(--k-color-ground, #FFFFFF);
  --k-bg-sub:     var(--k-c-ink-050);
  --k-bg-raised:  var(--k-color-ground, #FFFFFF);
  --k-bg-dark:    var(--k-color-ground-dark, #111517);

  /* ---- semantic: text */
  --k-text:          var(--k-c-ink-900);
  --k-text-secondary:var(--k-c-ink-600);
  --k-text-faint:    var(--k-c-ink-500);
  --k-text-on-dark:  var(--k-color-on-dark, #FFFFFF);
  --k-text-on-action:var(--k-color-ground, #FFFFFF);

  /* ---- semantic: line */
  --k-line:         var(--k-c-ink-100);
  --k-line-strong:  var(--k-c-ink-200);
  /* The boundary of a control, which WCAG asks to be 3:1, unlike a rule between
     rows, which is decoration and may be as quiet as it likes. */
  --k-line-control: var(--k-c-ink-400);
  --k-line-on-dark: rgba(255,255,255,.22);

  /* ---- semantic: action.  The primary button is the text colour, as in the
         template; the brand carries links, marks, focus and the accent fills. */
  --k-action:         var(--k-c-ink-900);
  --k-action-hover:   var(--k-c-ink-800);
  --k-action-active:  #000000;
  --k-accent:         var(--k-c-brand-600);       /* brand as text: >= 4.5:1 on both light grounds */
  --k-accent-hover:   var(--k-c-brand-600);       /* replaced below where color-mix exists */
  --k-accent-soft:    var(--k-bg-sub);            /* replaced below where color-mix exists */
  --k-accent-on-dark: var(--k-color-brand-ink-on-dark, #8FD3BE);
  --k-accent-edge:    var(--k-color-brand-edge, #1C5F4D);   /* lines and bars that carry information: >= 3:1 */
  --k-accent-fill:    var(--k-color-accent, #1C5F4D);       /* the owner's accent (the brand when unset), as a fill */
  --k-on-accent-fill: var(--k-color-on-accent, #FFFFFF);
  --k-focus:          var(--k-color-brand-edge, #1C5F4D);
  --k-focus-on-dark:  var(--k-color-on-dark, #FFFFFF);

  /* ---- semantic: status */
  --k-sale:      var(--k-c-sale-600);
  --k-sale-soft: var(--k-c-sale-100);
  --k-oos:       var(--k-c-ink-600);

  /* ---- primitive: space (px, so it does not grow when a reader enlarges text) */
  --k-s-1: 2px;  --k-s-2: 4px;  --k-s-3: 6px;  --k-s-4: 8px;
  --k-s-5: 12px; --k-s-6: 16px; --k-s-7: 20px; --k-s-8: 24px;
  --k-s-9: 32px; --k-s-10: 40px; --k-s-11: 48px; --k-s-12: 64px;
  --k-s-13: 80px; --k-s-14: 96px;

  /* ---- semantic: space by job */
  --k-gap-tight:   var(--k-s-3);
  --k-gap-inner:   var(--k-s-4);
  --k-gap-group:   var(--k-s-6);
  --k-gap-grid:    clamp(16px, 2.2vw, 28px);
  --k-pad-block:   clamp(40px, 5.5vw, 88px);
  --k-pad-gutter:  clamp(16px, 4vw, 48px);
  --k-measure:     62ch;
  --k-container:   1320px;

  /* ---- radius: one scale, spent by role.  Controls follow the panel's shape. */
  --k-r-1: 2px;   /* badge, swatch outline */
  --k-r-2: 4px;   /* card media, small panels */
  --k-r-3: 8px;   /* panel */
  --k-r-pill: 999px;
  --k-r-control: var(--k-radius-control, 4px);   /* buttons, fields, steppers: "button shape" in the panel */

  /* ---- logo: the widths chosen in the panel */
  --k-logo-w: var(--k-logo-width, 160px);
  --k-logo-w-phone: var(--k-logo-width-phone, 112px);

  /* ---- elevation: restrained.  Resting cards are ruled, not shadowed */
  --k-shadow-0: none;
  --k-shadow-1: 0 1px 2px rgba(17,21,23,.06);
  --k-shadow-2: 0 8px 24px -12px rgba(17,21,23,.28);
  --k-shadow-3: 0 24px 60px -28px rgba(17,21,23,.45);
  --k-ring: 0 0 0 3px var(--k-c-white), 0 0 0 6px var(--k-focus);

  /* ---- motion */
  --k-dur-feedback: 90ms;
  --k-dur-state: 160ms;
  --k-dur-move: 240ms;
  --k-dur-enter: 420ms;
  --k-ease-arrive: cubic-bezier(.2,.7,.3,1);
  --k-ease-state: cubic-bezier(.4,0,.2,1);
  --k-ease-exit: cubic-bezier(.4,0,1,1);
  /* read-only aliases: the short motion token names */
  --dur-feedback: var(--k-dur-feedback);
  --dur-state: var(--k-dur-state);
  --dur-move: var(--k-dur-move);
  --dur-enter: var(--k-dur-enter);
  --ease-arrive: var(--k-ease-arrive);
  --ease-state: var(--k-ease-state);
  --ease-exit: var(--k-ease-exit);

  /* ---- chrome: the header, the drawers, the layers */
  --k-z-header: 60;
  --k-z-flyout: 70;
  --k-z-scrim: 80;
  --k-z-drawer: 90;
  --k-header-row: 64px;        /* the identity row */
  --k-header-nav: 48px;        /* the navigation row, desktop only */
  --k-header-h: var(--k-header-row);   /* kept live by app.js for sticky offsets */
  --k-drawer-w: min(400px, 92vw);
  --k-scrim: rgba(17,21,23,.45);
  --k-tap: 44px;               /* the comfortable target; never smaller */

  /* ---- type: system 3.  The two faces come from the panel (see the top). */
  --k-fs-mult: 1;            /* optical size correction; 1 for Rubik + Noto */
  --k-w-display: 600;
  --k-w-heading: 600;
  --k-w-strong: 600;
  --k-w-ui: 500;
  --k-ls-display: -.022em;   /* negative tracking only above ~28px.  Never on Hebrew body */
  --k-ls-heading: -.012em;
  --k-lh-body: 1.78;         /* Hebrew has almost no descenders: it needs the gap */
  --k-lh-display: 1.08;
  --k-lh-heading: 1.26;

  /* ---- type scale: fluid between 360 and 1440, in rem so it scales with the reader.
         The two numbers in each comment are the sizes at 1440 and at 390. */
  --k-fs-hero:    calc(clamp(2.75rem, 1.35rem + 6.2vw, 4.75rem) * var(--k-fs-mult)); /* 76 · 46 - the one display moment */
  --k-fs-display: calc(clamp(2.125rem, 1.35rem + 3.44vw, 3.5rem) * var(--k-fs-mult)); /* 56 · 35 */
  --k-fs-h1:      calc(clamp(1.75rem, 1.28rem + 2.08vw, 2.6rem) * var(--k-fs-mult));  /* 42 · 29 */
  --k-fs-h2:      calc(clamp(1.375rem, 1.17rem + 0.92vw, 1.75rem) * var(--k-fs-mult));/* 28 · 22 */
  --k-fs-h3:      calc(clamp(1.125rem, 1.05rem + 0.33vw, 1.25rem) * var(--k-fs-mult));/* 20 · 18 */
  --k-fs-price-l: calc(clamp(1.5rem, 1.29rem + 0.92vw, 1.875rem) * var(--k-fs-mult)); /* 30 · 24 */
  --k-fs-lead:    calc(clamp(1.0625rem, 1.0rem + 0.28vw, 1.1875rem) * var(--k-fs-mult));/* 19 · 17 */
  --k-fs-body:    calc(clamp(1rem, 0.97rem + 0.14vw, 1.0625rem) * var(--k-fs-mult));  /* 17 · 16 */
  --k-fs-name:    calc(clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem) * var(--k-fs-mult));/* 17 · 15 */
  --k-fs-price-s: calc(clamp(0.9375rem, 0.91rem + 0.14vw, 1.0625rem) * var(--k-fs-mult));/* 17 · 15 */
  --k-fs-ui:      calc(clamp(0.9375rem, 0.92rem + 0.07vw, 1rem) * var(--k-fs-mult));  /* 16 · 15 */
  --k-fs-label:   calc(0.8125rem * var(--k-fs-mult));                                 /* 13 */
  --k-fs-small:   calc(0.8125rem * var(--k-fs-mult));                                 /* 13 */
  --k-fs-badge:   calc(0.75rem * var(--k-fs-mult));                                   /* 12 */
}

/* The shades derived from the owner's colours, where the browser can mix.
   Below the compatibility floor the plain values above stand. */
@supports (color: color-mix(in oklab, #000, #fff)) {
  :root {
    --k-c-ink-800:    color-mix(in oklab, var(--k-c-ink-900) 88%, #fff);
    --k-c-ink-200:    color-mix(in oklab, var(--k-c-ink-100) 62%, var(--k-c-ink-400));
    --k-accent-hover: color-mix(in oklab, var(--k-c-brand-600) 82%, #000);
    --k-accent-soft:  color-mix(in oklab, var(--k-color-brand, #1C5F4D) 10%, var(--k-bg-page));
  }
}

/* Reduced motion is handled once, by overriding the duration tokens.
   Colour and opacity transitions survive; spatial movement does not. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --k-dur-feedback: 1ms;
    --k-dur-state: 1ms;
    --k-dur-move: 1ms;
    --k-dur-enter: 1ms;
  }
}