/* RS Visual Sections — Impact design tokens.
   Premium, neutral, monochrome-led design language inspired by the Impact
   Shopify theme. Hand-maintained (NOT produced by build_components_css.py).

   Model:
   - --imp-* are the authoritative tokens the new Impact components read.
   - Tokens commonly emitted by a cloned layout's head_css (:root { --rs-* })
     are BRIDGED: `var(--rs-x, <impact default>)` so a faithful clone's palette
     flows into the new components, while pages without head_css fall back to
     the Impact defaults.
   - Legacy .ref-* components keep reading --rs-*; their non-bridged defaults
     are provided lower in this file so they render well even before head_css. */

:root {
  /* ===== Palette ===== */
  --imp-bg: #ffffff;
  --imp-surface: var(--rs-bg-soft, #f7f7f5);
  --imp-surface-2: #efeee9;
  --imp-ink: var(--rs-dark, #16161a);
  --imp-ink-soft: #3a3a42;
  --imp-muted: var(--rs-muted, #6f6f78);
  --imp-faint: #9a9aa2;
  --imp-line: var(--rs-line, #e7e6e1);
  --imp-line-strong: #d6d5cf;
  --imp-accent: var(--rs-accent, #16161a);
  --imp-accent-ink: #ffffff;
  --imp-accent-2: var(--rs-accent-2, #7a6a52);
  --imp-sale: #b42318;
  --imp-rating: #f2a900;
  --imp-success: #2f7a44;
  --imp-overlay: rgba(16, 16, 22, 0.42);

  /* ===== Typography (system-first, zero render-blocking web fonts) ===== */
  --imp-font-body: var(--rs-body-font, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif);
  --imp-font-heading: var(--rs-heading-font, var(--imp-font-body));
  --imp-fw-normal: 400;
  --imp-fw-medium: 500;
  --imp-fw-semibold: 600;
  --imp-fw-bold: 700;
  --imp-fw-black: 800;

  --imp-text-xs: 0.75rem;
  --imp-text-sm: 0.8125rem;
  --imp-text-base: 0.9375rem;
  --imp-text-md: 1rem;
  --imp-text-lg: 1.125rem;
  --imp-text-xl: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
  --imp-h4: clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --imp-h3: clamp(1.4rem, 1.15rem + 1.2vw, 1.9rem);
  --imp-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --imp-h1: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);

  --imp-lh-tight: 1.08;
  --imp-lh-snug: 1.25;
  --imp-lh-normal: 1.6;
  --imp-tracking-tight: -0.02em;
  --imp-tracking-wide: 0.12em;

  /* ===== Spacing (4px base) ===== */
  --imp-space-1: 4px;
  --imp-space-2: 8px;
  --imp-space-3: 12px;
  --imp-space-4: 16px;
  --imp-space-5: 24px;
  --imp-space-6: 32px;
  --imp-space-7: 40px;
  --imp-space-8: 48px;
  --imp-space-9: 64px;
  --imp-space-10: 80px;
  --imp-space-12: 112px;
  --imp-section-y: clamp(48px, 6vw, 104px);
  --imp-gap: var(--rs-gap, 24px);

  /* ===== Layout ===== */
  --imp-container: var(--rs-container, 1300px);
  --imp-container-wide: 1600px;
  --imp-container-narrow: 760px;
  --imp-page-x: clamp(16px, 4vw, 48px);

  /* ===== Radius / shadow / motion ===== */
  --imp-radius-sm: 6px;
  --imp-radius: var(--rs-radius, 12px);
  --imp-radius-lg: 20px;
  --imp-radius-pill: 999px;
  --imp-shadow-sm: 0 1px 3px rgba(20, 20, 26, 0.06), 0 1px 2px rgba(20, 20, 26, 0.04);
  --imp-shadow: 0 8px 24px -10px rgba(20, 20, 26, 0.18), 0 2px 6px rgba(20, 20, 26, 0.06);
  --imp-shadow-lg: 0 24px 60px -20px rgba(20, 20, 26, 0.28);
  --imp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --imp-dur: 0.35s;
  --imp-dur-fast: 0.2s;
  --imp-header-h: 72px;
  --imp-z-header: 200;
  --imp-z-drawer: 400;
  --imp-z-overlay: 300;
}

/* Legacy --rs-* defaults (non-bridged only, so there is no var() cycle).
   Placed in :where() to keep specificity 0 — any inline head_css :root from a
   cloned layout always wins, preserving faithful palette overrides. */
:where(:root) {
  --rs-bg: #ffffff;
  --rs-bg-soft: #f7f7f5;
  --rs-line: #e7e6e1;
  --rs-muted: #6f6f78;
  --rs-text: #16161a;
  --rs-dark: #16161a;
  --rs-dark-deep: #0f1117;
  --rs-accent: #16161a;
  --rs-accent-2: #7a6a52;
  --rs-radius: 12px;
  --rs-radius-button: 999px;
  --rs-gap: 24px;
  --rs-container: 1300px;
  --rs-heading-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rs-body-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}