/* BestGoods catalog pass-9 — compact catalog tokens (pass-6 base retained) */

*, *::before, *::after { box-sizing: border-box; }

:root,
html[data-ui="catalog"] {
  /* Zinc palette (Tailwind zinc) */
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Slate aliases (compat) */
  --slate-50: var(--zinc-50);
  --slate-100: var(--zinc-100);
  --slate-200: var(--zinc-200);
  --slate-300: var(--zinc-300);
  --slate-400: var(--zinc-400);
  --slate-500: var(--zinc-500);
  --slate-600: var(--zinc-600);
  --slate-700: var(--zinc-700);
  --slate-800: var(--zinc-800);
  --slate-900: var(--zinc-900);
  --slate-950: var(--zinc-950);

  --neutral-50: var(--zinc-50);
  --neutral-100: var(--zinc-100);
  --neutral-200: var(--zinc-200);
  --neutral-300: var(--zinc-300);
  --neutral-400: var(--zinc-400);
  --neutral-500: var(--zinc-500);
  --neutral-600: var(--zinc-600);
  --neutral-700: var(--zinc-700);
  --neutral-800: var(--zinc-800);
  --neutral-900: var(--zinc-900);
  --neutral-950: var(--zinc-950);

  /* Sky-700 primary — encyclopedia links/CTA (≠ AIAds blue) */
  --sky-50: #f0f9ff;
  --sky-100: #e0f2fe;
  --sky-500: #0ea5e9;
  --sky-600: #0284c7;
  --sky-700: #0369a1;
  --sky-800: #075985;

  --accent-50: var(--sky-50);
  --accent-100: var(--sky-100);
  --accent-500: var(--sky-500);
  --accent-600: var(--sky-700);
  --accent-700: var(--sky-800);
  --accent-800: #0c4a6e;

  /* Orange-600 — KPI numerals only */
  --data-50: #fff7ed;
  --data-500: #ea580c;
  --data-700: #c2410c;

  --trust-50: var(--zinc-100);
  --trust-600: var(--zinc-600);
  --trust-700: var(--zinc-700);

  /* Semantic tokens */
  --catalog-canvas: #ffffff;
  --catalog-canvas-subtle: var(--zinc-100);
  --catalog-canvas-raised: #ffffff;
  --catalog-border-default: var(--zinc-200);
  --catalog-border-muted: var(--zinc-100);
  --catalog-fg-default: var(--zinc-900);
  --catalog-fg-muted: var(--zinc-600);
  --catalog-fg-subtle: var(--zinc-500);
  --catalog-accent-fg: var(--sky-700);
  --catalog-accent-emphasis: var(--sky-800);
  --catalog-accent-subtle: var(--sky-50);
  --catalog-trust-fg: var(--zinc-700);
  --catalog-trust-subtle: var(--zinc-100);
  --catalog-nav-bg: #ffffff;
  --catalog-nav-fg: var(--zinc-900);
  --catalog-nav-muted: var(--zinc-500);
  --catalog-nav-border: var(--zinc-200);
  --catalog-kpi-fg: var(--data-500);

  --catalog-g50: #ecfdf5;
  --catalog-g500: #059669;
  --catalog-r50: #fef2f2;
  --catalog-r500: #dc2626;
  --catalog-y50: var(--data-50);
  --catalog-y500: var(--data-500);
  --catalog-blue-2: var(--sky-100);

  --bg-bg: var(--catalog-canvas-subtle);
  --bg-layer: var(--catalog-canvas);
  --bg-layer-02: var(--zinc-100);
  --bg-layer-accent: var(--catalog-accent-subtle);
  --bg-text: var(--catalog-fg-default);
  --bg-text-muted: var(--catalog-fg-muted);
  --bg-text-subtle: var(--catalog-fg-subtle);
  --bg-border: var(--catalog-border-default);
  --bg-border-strong: var(--zinc-300);
  --bg-accent: var(--sky-700);
  --bg-accent-hover: var(--sky-800);
  --bg-accent-soft: var(--catalog-accent-subtle);
  --bg-accent-muted: var(--sky-100);
  --bg-accent-fg: #ffffff;
  --bg-gray-900: var(--zinc-900);
  --bg-subtle: var(--zinc-100);
  --bg-success: var(--catalog-g500);
  --bg-success-soft: var(--catalog-g50);
  --bg-warning: var(--catalog-y500);
  --bg-warning-soft: var(--catalog-y50);
  --bg-danger: var(--catalog-r500);
  --bg-danger-soft: var(--catalog-r50);
  --bg-info: var(--sky-700);
  --bg-info-soft: var(--catalog-accent-subtle);
  --accent: var(--sky-700);
  --accent-muted: var(--sky-100);
  --danger: var(--catalog-r500);
  --danger-soft: var(--catalog-r50);
  --warning: var(--catalog-y500);
  --warning-soft: var(--catalog-y50);
  --border: var(--catalog-border-default);

  /* Layout — pass-6 AIAds v5 shell (8px grid) */
  --page-max: 1320px;
  --container: var(--page-max);
  --container-narrow: 768px;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --section-gap: var(--space-px-16);
  --section-gap-lg: var(--space-px-24);
  --content-padding-block: var(--space-px-16);
  --control-height: 40px;
  --topbar-height: 56px;
  --sidebar-width: 232px;
  --detail-rail-width: 220px;
  --bottom-nav-height: 56px;
  --touch-min: 44px;
  --border-width: 1px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --space-px-4: 0.25rem;
  --space-px-8: 0.5rem;
  --space-px-12: 0.75rem;
  --space-px-16: 1rem;
  --space-px-24: 1.5rem;
  --space-px-32: 2rem;
  --space-px-40: 2.5rem;
  --space-px-48: 3rem;
  --space-px-56: 3.5rem;
  --space-px-64: 4rem;
  --space-1: var(--space-px-4);
  --space-2: var(--space-px-8);
  --space-3: var(--space-px-12);
  --space-4: var(--space-px-16);
  --space-5: 1.25rem;
  --space-6: var(--space-px-24);
  --space-8: var(--space-px-32);
  --space-10: var(--space-px-40);
  --space-12: var(--space-px-48);
  --space-14: var(--space-px-56);
  --space-16: var(--space-px-64);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --radius: var(--radius-md);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-display: clamp(1.625rem, 2.8vw, 2.25rem);

  --shadow-xs: 0 1px 2px rgb(9 9 11 / 0.03);
  --shadow-sm: 0 1px 2px rgb(9 9 11 / 0.05);
  --shadow-md: 0 2px 6px rgb(9 9 11 / 0.06);
  --shadow-lg: 0 4px 12px rgb(9 9 11 / 0.08);
  --shadow-glow: 0 0 0 3px var(--sky-100);
  --focus-ring: 0 0 0 3px rgb(3 105 161 / 0.2);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 250ms var(--ease-out);
  --duration-fast: 150ms;
  --duration-normal: 250ms;

  color-scheme: light;
}

html[data-ui="catalog"] {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--catalog-fg-default);
  background: var(--catalog-canvas-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-ui="catalog"] body {
  margin: 0;
  background: var(--bg-bg);
  color: var(--bg-text);
}

html[data-ui="catalog"] img,
html[data-ui="catalog"] svg { display: block; max-width: 100%; }

html[data-ui="catalog"] button,
html[data-ui="catalog"] input,
html[data-ui="catalog"] select,
html[data-ui="catalog"] textarea { font: inherit; }

html[data-ui="catalog"] a { color: var(--bg-accent); }

html[data-ui="catalog"] :focus-visible {
  outline: 2px solid var(--bg-accent);
  outline-offset: 2px;
}

html[data-ui="catalog"] h1,
html[data-ui="catalog"] h2,
html[data-ui="catalog"] h3,
html[data-ui="catalog"] .section__title,
html[data-ui="catalog"] .catalog-masthead__title,
html[data-ui="catalog"] .page-header__title {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  white-space: normal;
  text-wrap: balance;
}

html[data-ui="catalog"] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}