/**
 * Kingsong Vision - canonical global design tokens
 * Source of truth: Vision-框架/DESIGN.md
 * Loaded globally via layout/theme.liquid (after head-variables).
 *
 * Section-local --ks-{prefix}-* tokens are for layout/sizing only.
 * Brand color, type scale, radius, shadow, z-index, and motion read from here.
 * No product, campaign, app or marketing-output exception may replace these
 * brand, typography, geometry or motion values.
 */

:root {
  /* ── Color: energy-signal palette ── */
  --ks-accent: #ff671d;
  --ks-accent-ink: #1a1c1d;
  /* Purchase Action — high-intent buy only (PDP / sticky buy / checkout).
     Discovery Shop Now and peer rail CTAs stay ink (#171a20), not this blue. */
  --ks-action: #3a6fe5;
  --ks-action-hover: #2f5ecc;
  --ks-action-ink: #ffffff;
  --ks-action-soft: #e8effc;
  --ks-action-soft-hover: #dce7fa;
  --ks-sale: #c62a32;
  --ks-ink: #1a1c1d;
  --ks-body: #2c2d2e;
  --ks-muted: #6b7280;
  --ks-bg: #f4f5f6;
  --ks-surface: #ffffff;
  --ks-surface-2: #eceef0;
  --ks-line: rgba(26, 28, 29, 0.10);
  --ks-line-strong: rgba(26, 28, 29, 0.22);
  --ks-night: #0d0e0f;
  --ks-night-2: #16181a;
  --ks-panel: #0d1218;
  --ks-on-dark-text: #dadce0;
  --ks-on-dark-link: #aaaeb6;
  --ks-rating: #ff671d;

  /* ── Typography: families ── */
  --ks-font-display: "Public Sans", "Noto Sans SC", sans-serif;
  --ks-font-body: "Public Sans", "Noto Sans SC", sans-serif;

  /* ── Typography: scale (DESIGN.md §3) ── */
  --ks-fs-display: clamp(2.125rem, 2vw, 3rem);
  --ks-fs-headline: clamp(1.75rem, 2vw, 2.25rem);
  --ks-fs-title: clamp(1.25rem, 1.4vw, 1.5rem);
  --ks-fs-body: 1rem;
  --ks-fs-lead: 1.125rem;
  --ks-fs-label: 0.75rem;
  --ks-fs-ui: 0.9375rem;
  --ks-fs-stat: clamp(1.875rem, 3vw, 2.75rem);
  --ks-fs-price: 1.25rem;

  /* PLP alias scale (ks-collection.css compatibility) */
  --ks-fs-xxl: var(--ks-fs-display);
  --ks-fs-xl: var(--ks-fs-headline);
  --ks-fs-lg: var(--ks-fs-title);
  --ks-fs-md: 1.125rem;
  --ks-fs-sm: 0.9rem;
  --ks-fs-xs: 0.75rem;

  /* ── Typography: weights & tracking ── */
  --ks-fw-regular: 400;
  --ks-fw-medium: 500;
  --ks-fw-semibold: 600;
  --ks-fw-bold: 700;
  --ks-ls-display: -0.012em;
  --ks-ls-headline: 0;
  --ks-ls-title: 0;
  --ks-ls-label: 0;
  --ks-lh-display: 1.167;
  --ks-lh-headline: 1.19;
  --ks-lh-title: 1.25;
  --ks-lh-body: 1.6;
  --ks-lh-lead: 1.55;
  --ks-lh-label: 1.45;
  --ks-lh-ui: 1.45;
  --ks-lh-stat: 1.1;

  /* ── Spacing (canonical --ks-s-*; --ks-1…9 = PLP aliases) ── */
  --ks-s-1: 0.25rem;
  --ks-s-2: 0.5rem;
  --ks-s-3: 0.75rem;
  --ks-s-4: 1rem;
  --ks-s-5: 1.5rem;
  --ks-s-6: 2rem;
  --ks-s-7: 3rem;
  --ks-s-8: 4rem;
  --ks-s-9: 6rem;
  --ks-1: var(--ks-s-1);
  --ks-2: var(--ks-s-2);
  --ks-3: var(--ks-s-3);
  --ks-4: var(--ks-s-4);
  --ks-5: var(--ks-s-5);
  --ks-6: var(--ks-s-6);
  --ks-7: var(--ks-s-7);
  --ks-8: var(--ks-s-8);
  --ks-9: var(--ks-s-9);
  /* Page shell: match header / hero / mci (15 → 50px, row max = grid+100) */
  --ks-page-gutter: 15px;
  --ks-page-gutter-md: 50px;
  --ks-maxw: var(--grid-width-row, 1380px);

  /* ── Radius ── */
  --ks-r-sm: 8px;
  --ks-r-card: 12px;
  --ks-r-panel: 14px;
  --ks-r-md: 14px;
  --ks-r-lg: 22px;
  --ks-r-pill: 999px;

  /* ── Flagship Media Mode: semantic geometry ── */
  --ks-r-media: 12px;
  --ks-r-media-mobile: 10px;
  --ks-r-control: 4px;
  --ks-flagship-edge: clamp(var(--ks-s-2), 1.35vw, var(--ks-s-5));

  /* ── Elevation / shadow ── */
  --ks-shadow-rest: 0 2px 10px rgba(13, 14, 15, 0.06);
  --ks-shadow-raised: 0 12px 34px rgba(13, 14, 15, 0.12);
  --ks-shadow-product: 0 30px 70px rgba(13, 14, 15, 0.22);
  --ks-shadow-sm: var(--ks-shadow-rest);
  --ks-shadow-md: var(--ks-shadow-raised);
  --ks-shadow-lg: var(--ks-shadow-product);

  /* ── Z-index scale (never use arbitrary 999 / 9999) ── */
  --ks-z-dropdown: 100;
  --ks-z-sticky: 200;
  --ks-z-drawer: 300;
  --ks-z-modal-backdrop: 400;
  --ks-z-modal: 410;
  --ks-z-toast: 500;
  --ks-z-tooltip: 510;

  /* ── Motion ── */
  --ks-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ks-dur-fast: 0.18s;
  --ks-dur: 0.45s;
  --ks-dur-slow: 0.7s;
  --ks-focus-entry-scale: 1.09;
  --ks-focus-exit-scale: 1.045;
  --ks-focus-entry-brightness: 0.72;
  --ks-focus-exit-brightness: 0.78;
  --ks-focus-copy-dim: 0.2;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ks-dur-fast: 0.01ms;
    --ks-dur: 0.01ms;
    --ks-dur-slow: 0.01ms;
  }
}

/**
 * Public Sans is not in the Shopify font_picker library.
 * Google Fonts loads in theme.liquid; these rules apply the canonical stack globally.
 */
body,
.body-font,
.thb-product-detail .product-title {
  font-family: var(--ks-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.logolink.text-logo,
.heading-font,
.h1-xlarge,
.h1-large,
blockquote p,
blockquote span {
  font-family: var(--ks-font-display);
}