/**
 * SmartCompare design system tokens
 * Use --sc-* in shell and verticals for consistency.
 */
:root {
  /* Colors */
  --sc-bg: #f8f7f5;
  --sc-surface: #ffffff;
  --sc-text: #1a1a1a;
  --sc-text-2: #5c5c5c;
  --sc-text-3: #8c8c8c;
  --sc-border: #e5e3e0;
  --sc-border-light: #f0eeeb;
  --sc-success: #16a34a;
  --sc-error: #dc2626;
  --sc-accent: #b8860b;

  /* Typography */
  --sc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sc-font-display: 'Playfair Display', serif;
  --sc-text-display: 2rem;
  --sc-text-h1: 1.5rem;
  --sc-text-h2: 1.25rem;
  --sc-text-body: 1rem;
  --sc-text-small: 0.875rem;
  --sc-text-micro: 0.75rem;
  --sc-leading-tight: 1.25;
  --sc-leading-normal: 1.5;

  /* Spacing (rem) */
  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-6: 1.5rem;
  --sc-space-8: 2rem;
  --sc-space-10: 2.5rem;
  --sc-space-12: 3rem;
  --sc-space-16: 4rem;

  /* Layout */
  --sc-content-max: 1200px;
  --sc-content-narrow: 720px;

  /* Shadows */
  --sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --sc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

  /* Radii */
  --sc-radius-sm: 6px;
  --sc-radius-md: 10px;
  --sc-radius-lg: 14px;
  --sc-radius-pill: 9999px;

  /* Focus */
  --sc-focus-ring: 2px solid rgba(184, 134, 11, 0.4);
}

*:focus-visible {
  outline: var(--sc-focus-ring);
  outline-offset: 2px;
}

/* Vertical accent for header slots (set by shell when vertical is active) */
body[data-vertical="glam"] {
  --sc-vertical-accent: #c2185b;
}
body[data-vertical="frag"] {
  --sc-vertical-accent: #7c3aed;
}