:root {
  /* Colors - Instagram-inspired dark palette */
  --color-bg-primary: #000000;
  --color-bg-secondary: #121212;
  --color-bg-elevated: #262626;
  --color-text-primary: #fafafa;
  --color-text-secondary: #a8a8a8;
  --color-border: #363636;
  --color-accent: #0095f6;
  --color-error: #ed4956;
  --color-heart: #ff6b81;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Layout */
  --feed-max-width: 470px;
  --border-radius: 8px;
  --avatar-size-sm: 32px;
  --avatar-size-md: 44px;
}

/* Global resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* View Transitions - keep sticky header above transitioning content */
::view-transition-group(header) {
  z-index: 100;
}