/* PopCultureMarket — design tokens, synced from the Claude Design project
   "Collector dock design" (ui_kits/public). Navy chrome, amber accent, warm
   cream neutrals, Inter. Re-sync by diffing against tokens/colors.css +
   tokens/typography.css + tokens/spacing.css in that project. */
:root {
  /* ── Navy (dark chrome: header) ────────────────────────────────────── */
  --navy-900: oklch(23% 0.045 255);
  --navy-800: oklch(28% 0.045 255);
  --navy-700: oklch(32% 0.04 255);
  --navy-600: oklch(30% 0.04 255);
  --navy-300: oklch(72% 0.02 255);
  --navy-100: oklch(92% 0.02 255);

  /* ── Amber (brand primary / CTA) ──────────────────────────────────── */
  --amber-50: oklch(94% 0.03 55);
  --amber-100: oklch(90% 0.04 55);
  --amber-200: oklch(85% 0.06 55);
  --amber-500: oklch(64% 0.16 55);
  --amber-600: oklch(56% 0.17 50);
  --amber-700: oklch(50% 0.14 55);
  --amber-900: oklch(18% 0.03 60);

  /* ── Warm neutrals (replaces cool gray) ────────────────────────────── */
  --gray-50: oklch(97.5% 0.006 75);
  --gray-100: oklch(94% 0.008 75);
  --gray-200: oklch(88% 0.006 75);
  --gray-300: oklch(85% 0.006 75);
  --gray-400: oklch(55% 0.01 60);
  --gray-500: oklch(52% 0.014 60);
  --gray-600: oklch(42% 0.014 60);
  --gray-700: oklch(30% 0.012 60);
  --gray-800: oklch(24% 0.012 60);
  --gray-900: oklch(18% 0.012 60);

  /* ── Semantic accents (badges, alerts) ─────────────────────────────── */
  --blue-50: oklch(94% 0.025 250);
  --blue-700: oklch(45% 0.1 250);
  --green-50: oklch(94% 0.03 155);
  --green-600: oklch(56% 0.13 155);
  --green-700: oklch(45% 0.13 155);
  --violet-50: oklch(94% 0.025 300);
  --violet-700: oklch(45% 0.11 300);
  --red-50: oklch(94% 0.03 25);
  --red-200: oklch(85% 0.06 25);
  --red-700: oklch(45% 0.15 25);
  --rose-500: oklch(64% 0.16 15);
  --rose-700: oklch(45% 0.15 15);

  /* ── Semantic aliases ─────────────────────────────────────────────── */
  --color-primary: var(--amber-500);
  --color-primary-hover: var(--amber-600);
  --color-primary-subtle-bg: var(--amber-50);
  --color-primary-subtle-text: var(--amber-700);

  --surface-page: var(--gray-50);
  --surface-shell: var(--gray-100);
  --surface-card: #ffffff;
  --surface-sidebar: var(--navy-900);

  --border-default: var(--gray-200);
  --border-input: var(--gray-300);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-primary: var(--amber-900);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: var(--navy-300);

  --badge-variant-bg: var(--violet-50);
  --badge-variant-text: var(--violet-700);
  --badge-condition-bg: var(--green-50);
  --badge-condition-text: var(--green-700);
  --badge-graded-bg: var(--amber-50);
  --badge-graded-text: var(--amber-700);
  --badge-set-bg: var(--blue-50);
  --badge-set-text: var(--blue-700);
  --badge-brand-bg: var(--amber-50);
  --badge-brand-text: var(--amber-700);
  --badge-neutral-bg: var(--gray-100);
  --badge-neutral-text: var(--gray-600);
  --badge-pending-bg: var(--amber-500);
  --badge-pending-text: var(--amber-900);
  --badge-role-bg: var(--navy-100);
  --badge-role-text: var(--navy-800);

  --price-text: var(--gray-900);
  --success-text: var(--green-600);
  --alert-success-bg: var(--green-50);
  --alert-success-border: oklch(85% 0.05 155);
  --alert-success-text: var(--green-700);
  --alert-error-bg: var(--red-50);
  --alert-error-border: var(--red-200);
  --alert-error-text: var(--red-700);

  --focus-ring: var(--amber-500);
  --link-color: var(--amber-500);
  --link-hover: var(--amber-600);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;

  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* ── Spacing / radii / shadows ──────────────────────────────────────── */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

body {
  font-family: var(--font-sans);
}

/* Defensive: some browsers (notably mobile WebKit) can let a nested flex
   row's content-based minimum width bubble up past the viewport even when
   every row individually fits in Chromium's layout engine. Since this is a
   page shell, not a horizontally-scrollable widget, never allow the whole
   page to require horizontal scrolling — clip instead of shifting the
   entire layout. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}