/* ============================================
   Global Design Tokens & Styles
   ============================================ */

:root {
  /* Color Palette - OKLCH for perceptual uniformity */
  --color-headline: oklch(0.36 0.09 246);
  --color-paragraph: oklch(0.53 0.03 252);
  --color-background: oklch(0.995 0.01 106);
  --color-link: oklch(0.46 0.16 246);
  --color-surface: oklch(0.98 0.01 106);

  /* Typography */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

  /* Spacing Scale - Based on 8px grid */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Legacy support */
  --space: var(--space-sm);
  --heading-font: var(--font-display);

  /* Animation & Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  /* Large surfaces: cards, search shell, hero panels. Previously spelled
     out ad hoc (1.45rem / 1.5rem / 2rem) across listing.css and cards.css. */
  --radius-2xl: 1.45rem;
  --radius-3xl: 2rem;
  --radius-pill: 999px;

  /* Keyboard focus ring, shared by every interactive listing surface. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* Navbar */
  --navbar-height: 4rem;
  --navbar-blur: 16px;

  /* Editorial / Article Fonts */
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-display-editorial: 'Cormorant Garamond', 'Georgia', serif;

  /* Astrophotography palette */
  --color-astro-bg: oklch(0.057 0.025 268);
  --color-astro-text: oklch(0.86 0.03 255);
  --color-astro-muted: oklch(0.6 0.06 255);
  --color-astro-accent: oklch(0.68 0.18 213);
  --color-astro-glow: oklch(0.58 0.16 285);

  /* Recipe palette */
  --recipe-headline: oklch(0.3 0.05 45);
  --recipe-accent: oklch(0.62 0.14 50);
  --recipe-accent-light: oklch(0.94 0.04 62);
  --recipe-accent-dark: oklch(0.46 0.13 44);
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-weight: 300;
  background-color: var(--color-background);
  color: var(--color-paragraph);
}