:root {
  /* Dark theme (default) */
  --bg-base: #060608;
  --bg-surface: #0c0c12;
  --bg-surface-elevated: #14141c;
  --bg-surface-hover: #1c1c28;

  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);

  --text-primary: #f0f0f5;
  --text-secondary: #a0a3b8;
  --text-muted: #6b6e80;

  --accent: #00d47e; /* reserved for primary CTA only */
  --accent-hover: #00e68a;
  --accent-glow: rgba(0, 212, 126, 0.15);
  --accent-subtle: rgba(0, 212, 126, 0.06);
  --accent-on-accent: #04120b; /* dark text on bright green CTA for contrast */

  /* Warm gold accent — Daily Hadith warmth, never for primary CTA */
  --accent-2: #ffd84d;
  --accent-2-hover: #ffe07a;
  --accent-2-glow: rgba(255, 216, 77, 0.16);
  --accent-2-subtle: rgba(255, 216, 77, 0.07);
  --accent-2-on-accent: #221a00;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-device: 0 18px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-device: 22px;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.5rem, 6vw, 4.5rem);
  --text-4xl: clamp(3rem, 8vw, 6rem);
  --text-5xl: clamp(3.5rem, 10vw, 7rem);

  --leading-tight: 1.05;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.04em;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-normal: 220ms var(--ease-out);
  --transition-smooth: 340ms var(--ease-out);
  --transition-slow: 500ms var(--ease-out);

  /* Typography — display for headings, body for UI text */
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Fraunces', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Section rhythm — consistent vertical cadence */
  --section-gap: var(--sp-16);
  --section-padding-y: var(--sp-16);
  --section-padding-y-sm: var(--sp-10);
  --section-title-gap: var(--sp-5);

  --container-max: 1200px;
  --header-height: 64px;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Device frame */
  --device-bezel: 2px;
  --device-bezel-color: rgba(255, 255, 255, 0.08);
  --device-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --device-notch: rgba(0, 0, 0, 0.3);

  /* Shelf layout */
  --shelf-gap: var(--sp-20);
  --shelf-padding: var(--sp-16);
  --shelf-info-width: 340px;
  --shelf-screenshot-height: 320px;
  --shelf-screenshot-height-featured: 400px;
  --shelf-screenshot-width: 200px;
  --shelf-screenshot-width-featured: 240px;

  /* Parallax */
  --parallax-speed: 0.15;
}

[data-theme="light"] {
  --bg-base: #f6f7f9;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ebedf2;
  --bg-surface-hover: #e1e4ec;

  --border-subtle: rgba(12, 13, 20, 0.08);
  --border-medium: rgba(12, 13, 20, 0.16);
  --border-strong: rgba(12, 13, 20, 0.28);

  --text-primary: #0c0d14;
  --text-secondary: #3f4354;
  --text-muted: #5a5e72;

  --accent: #006843; /* darkened for ≥4.5:1 contrast on light surfaces */
  --accent-hover: #005a3a;
  --accent-glow: rgba(0, 104, 67, 0.14);
  --accent-subtle: rgba(0, 104, 67, 0.06);
  --accent-on-accent: #ffffff;

  /* Warm gold — darkened bronze for light-theme contrast */
  --accent-2: #7a5800;
  --accent-2-hover: #644800;
  --accent-2-glow: rgba(122, 88, 0, 0.14);
  --accent-2-subtle: rgba(122, 88, 0, 0.06);
  --accent-2-on-accent: #ffffff;

  --shadow-sm: 0 2px 8px rgba(10, 10, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 10, 20, 0.06);
  --shadow-lg: 0 20px 44px rgba(10, 10, 20, 0.08);
  --shadow-device: 0 12px 36px rgba(10, 10, 20, 0.1), 0 2px 6px rgba(10, 10, 20, 0.06);

  --device-bezel-color: rgba(10, 10, 20, 0.08);
  --device-shadow: 0 16px 40px rgba(10, 10, 20, 0.12), 0 4px 10px rgba(10, 10, 20, 0.06);
  --device-notch: rgba(10, 10, 20, 0.06);
}