/*
  GospelVue design tokens.

  Brand direction: warm, welcoming, content-first — a "light of dawn" feel
  (terracotta + deep teal) rather than the blue/red/purple used by
  existing video or social platforms. Light and dark values are supplied
  for every color token so the shell adapts to system preference.

  Breakpoints (referenced by media queries throughout the site, plain
  numbers since CSS custom properties cannot be used inside @media):
    --bp-sm: 480px  (large phones)
    --bp-md: 768px  (tablets)
    --bp-lg: 1024px (small desktops)
    --bp-xl: 1280px (wide desktops)
*/

:root {
  color-scheme: light dark;

  /* ---- Color: light (default) ---- */
  --color-bg: #faf7f2;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f1ece3;
  --color-border: #e8e1d6;
  --color-text: #23201b;
  --color-text-muted: #6b6459;
  --color-text-on-primary: #fffaf5;
  --color-text-on-accent: #ffffff;

  --color-primary: #e4572e;
  --color-primary-hover: #c94a24;
  --color-primary-active: #b13f1f;

  --color-accent: #2f7a6b;
  --color-accent-hover: #256257;

  --color-focus-ring: #2f7a6b;

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.7;

  /* ---- Spacing (4px base scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Radii ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadows (warm-tinted, not pure black) ---- */
  --shadow-sm: 0 1px 2px rgba(35, 32, 27, 0.08);
  --shadow-md: 0 4px 12px rgba(35, 32, 27, 0.10);
  --shadow-lg: 0 12px 32px rgba(35, 32, 27, 0.14);

  /* ---- Content widths ---- */
  --content-width-sm: 40rem;
  --content-width-md: 60rem;
  --content-width-lg: 75rem;
  --content-width-xl: 90rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #15181c;
    --color-bg-elevated: #1d2126;
    --color-surface: #1d2126;
    --color-surface-muted: #262b31;
    --color-border: #2c3238;
    --color-text: #f3f1ec;
    --color-text-muted: #9ca3aa;
    --color-text-on-primary: #1a120c;
    --color-text-on-accent: #0c1917;

    --color-primary: #f2884b;
    --color-primary-hover: #ff9c60;
    --color-primary-active: #ffb27a;

    --color-accent: #4fb3a3;
    --color-accent-hover: #6cc4b6;

    --color-focus-ring: #4fb3a3;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.36);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.44);
  }
}