/* ==========================================================================
   FAIRYTALES — Apple Design Tokens (Cupertino Minimalist Design System)
   Derived from Apple.com Design Guidelines
   ========================================================================== */

:root {
  /* Surfaces & Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;       /* Apple signature canvas */
  --bg-tertiary: #fbfbfd;
  --bg-dark: #000000;          /* Apple Jet Black */
  --bg-dark-secondary: #161617;/* Apple Obsidian */
  --bg-dark-card: #1d1d1f;     /* Apple Space Gray card */

  /* Apple System Colors */
  --apple-blue: #0071e3;
  --apple-blue-hover: #0077ed;
  --apple-blue-active: #0062c4;
  --apple-blue-tint: #e8f2fc;
  --apple-link: #06c;

  /* Accent Gradients (Vision Pro / Apple Intelligence) */
  --apple-gradient-text: linear-gradient(135deg, #0071e3 0%, #a855f7 50%, #ec4899 100%);
  --apple-gradient-card: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(245,245,247,0.6) 100%);
  --apple-gradient-dark: linear-gradient(180deg, #1d1d1f 0%, #000000 100%);

  /* Typography Colors */
  --color-headline: #1d1d1f;
  --color-body: #424245;
  --color-muted: #86868b;
  --color-border: #d2d2d7;
  --color-border-light: #e5e5ea;

  /* Dark Theme Inks */
  --color-dark-headline: #f5f5f7;
  --color-dark-body: #a1a1a6;
  --color-dark-muted: #6e6e73;
  --color-dark-border: #333336;

  /* Typography Families */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Glassmorphism & Elevation */
  --nav-backdrop-filter: saturate(180%) blur(20px);
  --nav-bg-light: rgba(255, 255, 255, 0.85);
  --nav-bg-dark: rgba(0, 0, 0, 0.85);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --card-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.08);
  --card-shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.4);

  /* Radius (Apple Squircles) */
  --radius-xs: 6px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 9999px;

  /* Layout Consts */
  --nav-height: 48px;
  --container-max: 1240px;
  --container-wide: 1400px;
}