:root {
  /* Colors - Apple Light Mode Style */
  --color-bg-primary: #FFFFFF;
  /* Pure White */
  --color-bg-secondary: #F5F5F7;
  /* Light Gray Background */
  --color-bg-tertiary: #E8E8ED;
  /* Slightly darker for inputs/elements */

  --color-text-primary: #1d1d1f;
  /* Almost Black */
  --color-text-secondary: #86868b;
  /* Cool Gray */
  --color-text-muted: #6e6e73;

  /* Brand Accents */
  --color-accent-primary: #0071e3;
  /* Apple Blue (slightly darker for light mode contrast) */
  --color-accent-secondary: #5e5ce6;
  /* Secondary Accent */
  --color-accent-hover: #0077ED;
  --color-accent-dim: rgba(0, 113, 227, 0.1);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0071e3 0%, #42a1ff 100%);
  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
  --gradient-glow: radial-gradient(circle at center, rgba(0, 113, 227, 0.15) 0%, transparent 70%);

  /* Borders */
  --border-color: #d2d2d7;
  --border-active: #86868b;
  --border-accent: #0071e3;

  /* Typography - SF Pro Feel */
  --font-family-base: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-family-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

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

  --line-height-base: 1.47059;
  /* SF standard */
  --line-height-tight: 1.1;

  --letter-spacing-tight: -0.022em;
  /* Tighter tracking for headlines */

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 96px;
  --spacing-2xl: 120px;

  /* Layout */
  --container-width: 980px;
  /* Apple strict content width */
  --container-width-wide: min(100%, 1600px);
  /* Wider container for more content space */
  --header-height: 44px;
  /* Apple's standard nav height */

  /* UI Elements */
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 30px;
  /* Continuous curve approximation */
  --border-radius-full: 9999px;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);

  --transition-fast: 200ms ease;
  --transition-smooth: 800ms cubic-bezier(0.19, 1, 0.22, 1);
  /* "Power ease" for that recognizable smooth finish */
}