/* =====================================================================
   ISA COMMERCE CORE — TOKENS BRIDGE
   ---------------------------------------------------------------------
   Sumber nilai: theme.json (--wp--preset--* / --wp--custom--*), yang
   berubah per brand skin (style variation). Komponen core memakai nama
   --isa-* (sama dengan PROTOTYPE/isa-hijab/css/tokens.css) sehingga:
     • CSS komponen TIDAK berubah saat ganti brand,
     • marketing mengubah warna/font di Site Editor → Styles, langsung
       tercermin di semua komponen.
   Jangan menulis nilai warna/font literal di sini.
   ===================================================================== */

:root {
  /* ---------- COLOR ---------- */
  --isa-color-primary:      var(--wp--preset--color--primary);
  --isa-color-secondary:    var(--wp--preset--color--secondary);
  --isa-color-accent:       var(--wp--preset--color--accent);
  --isa-color-accent-soft:  var(--wp--preset--color--accent-soft);
  --isa-color-background:   var(--wp--preset--color--background);
  --isa-color-surface:      var(--wp--preset--color--surface);
  --isa-color-surface-alt:  var(--wp--preset--color--surface-alt);
  --isa-color-text:         var(--wp--preset--color--text);
  --isa-color-text-muted:   var(--wp--preset--color--text-muted);
  --isa-color-text-inverse: var(--wp--preset--color--text-inverse);
  --isa-color-border:       var(--wp--preset--color--border);
  --isa-color-success:      var(--wp--preset--color--success);
  --isa-color-warning:      var(--wp--preset--color--warning);
  --isa-color-error:        var(--wp--preset--color--error);
  --isa-color-whatsapp:     var(--wp--preset--color--whatsapp);
  --isa-color-overlay:      var(--wp--preset--color--overlay);

  /* ---------- TYPOGRAPHY ---------- */
  --isa-font-display: var(--wp--preset--font-family--display);
  --isa-font-body:    var(--wp--preset--font-family--body);

  --isa-text-display-xl: var(--wp--preset--font-size--display-xl);
  --isa-text-display:    var(--wp--preset--font-size--display);
  --isa-text-h1:         var(--wp--preset--font-size--h-1);
  --isa-text-h2:         var(--wp--preset--font-size--h-2);
  --isa-text-h3:         var(--wp--preset--font-size--h-3);
  --isa-text-h4:         var(--wp--preset--font-size--h-4);
  --isa-text-body-lg:    var(--wp--preset--font-size--body-lg);
  --isa-text-body:       var(--wp--preset--font-size--body);
  --isa-text-small:      var(--wp--preset--font-size--small);
  --isa-text-caption:    var(--wp--preset--font-size--caption);

  --isa-leading-tight:  var(--wp--custom--leading--tight);
  --isa-leading-snug:   var(--wp--custom--leading--snug);
  --isa-leading-normal: var(--wp--custom--leading--normal);
  --isa-tracking-wide:  var(--wp--custom--tracking--wide);
  --isa-tracking-wider: var(--wp--custom--tracking--wider);

  /* ---------- LAYOUT ---------- */
  --isa-container:        var(--wp--style--global--wide-size);
  --isa-container-narrow: var(--wp--style--global--content-size);
  --isa-page-padding:     var(--wp--preset--spacing--page);
  --isa-mobile-padding:   var(--wp--preset--spacing--40);
  --isa-section-space:    var(--wp--preset--spacing--section);
  --isa-section-space-sm: var(--wp--preset--spacing--section-sm);
  --isa-grid-gap:         var(--wp--preset--spacing--grid-gap);
  --isa-card-gap:         var(--wp--preset--spacing--card-gap);

  --isa-space-1: var(--wp--preset--spacing--10);
  --isa-space-2: var(--wp--preset--spacing--20);
  --isa-space-3: var(--wp--preset--spacing--30);
  --isa-space-4: var(--wp--preset--spacing--40);
  --isa-space-5: var(--wp--preset--spacing--50);
  --isa-space-6: var(--wp--preset--spacing--60);
  --isa-space-7: var(--wp--preset--spacing--70);
  --isa-space-8: var(--wp--preset--spacing--80);
  --isa-space-9: var(--wp--preset--spacing--90);

  /* ---------- COMPONENT ---------- */
  --isa-radius:        var(--wp--custom--radius--default);
  --isa-radius-button: var(--wp--custom--radius--button);
  --isa-radius-card:   var(--wp--custom--radius--card);
  --isa-radius-pill:   var(--wp--custom--radius--pill);
  --isa-border:        1px solid var(--isa-color-border);
  --isa-shadow-sm:     var(--wp--preset--shadow--sm);
  --isa-shadow-md:     var(--wp--preset--shadow--md);
  --isa-shadow-lg:     var(--wp--preset--shadow--lg);
  --isa-ratio-product:   var(--wp--custom--ratio--product);
  --isa-ratio-category:  var(--wp--custom--ratio--category);
  --isa-ratio-editorial: var(--wp--custom--ratio--editorial);
  --isa-ratio-square:    var(--wp--custom--ratio--square);
  --isa-ratio-banner:    var(--wp--custom--ratio--banner);

  /* ---------- HEADER (skin dapat mengubah tinggi/logo) ---------- */
  --isa-header-h:          var(--wp--custom--header--height-mobile);
  --isa-header-h-desktop:  var(--wp--custom--header--height-desktop);
  --isa-header-h-scrolled: var(--wp--custom--header--height-scrolled);
  --isa-logo-h:            var(--wp--custom--header--logo-mobile);
  --isa-logo-h-desktop:    var(--wp--custom--header--logo-desktop);
  --isa-logo-h-scrolled:   var(--wp--custom--header--logo-scrolled);

  /* ---------- MOTION ---------- */
  --isa-motion-fast:   var(--wp--custom--motion--fast);
  --isa-motion-normal: var(--wp--custom--motion--normal);
  --isa-motion-slow:   var(--wp--custom--motion--slow);
  --isa-ease:          var(--wp--custom--motion--ease);
  --isa-ease-out:      var(--wp--custom--motion--ease-out);

  /* ---------- Z-INDEX ---------- */
  --isa-z-header: var(--wp--custom--z-index--header);
  --isa-z-drawer: var(--wp--custom--z-index--drawer);
  --isa-z-float:  var(--wp--custom--z-index--float);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --isa-motion-fast: 0ms;
    --isa-motion-normal: 0ms;
    --isa-motion-slow: 0ms;
  }
}