/* ============================================
   DESIGN TOKENS — iPhone 17 Pro Tri-Theme System
   Palettes: Silver, Deep Blue, Cosmic Orange
   ============================================ */
:root,
[data-theme="silver"] {
  /* Colors — Silver: clean aluminum, navy accent */
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-elevated: #ffffff;
  --color-text-1: #1a1a2e;
  --color-text-2: #555770;
  --color-text-3: #8b8da3;
  --color-accent: #32374A;
  --color-accent-hover: #4a5068;
  --color-border: #d8dae0;
  --color-border-subtle: #ededf0;
  --color-chip-bg: #e8e9ed;
  --color-chip-text: #555770;
  --color-glow: rgba(50, 55, 74, 0.06);
  --color-nav-bg: rgba(245, 245, 245, 0.85);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radius */
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;
  --r-full: 999px;

  /* Shadows */
  --shadow-s: 0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03);
  --shadow-m: 0 4px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-hero: clamp(2.4rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.75rem, 3.5vw, 2.25rem);
  --fs-h2: clamp(1.4rem, 3vw, 1.75rem);
  --fs-h3: clamp(1rem, 2vw, 1.125rem);
  --fs-body: clamp(0.925rem, 1.5vw, 1rem);
  --fs-small: clamp(0.8rem, 1.2vw, 0.875rem);
  --fs-xs: 0.75rem;

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 200ms;
}

/* Deep Blue — dark navy, silver-blue accents */
[data-theme="deep-blue"] {
  --color-bg: #0d0f18;
  --color-surface: #171a2a;
  --color-elevated: #1e2238;
  --color-text-1: #e8eaf0;
  --color-text-2: #9498b0;
  --color-text-3: #5d6280;
  --color-accent: #8a9cc0;
  --color-accent-hover: #a8b6d4;
  --color-border: #262a40;
  --color-border-subtle: #1c1f32;
  --color-chip-bg: #1e2238;
  --color-chip-text: #9498b0;
  --color-glow: rgba(138, 156, 192, 0.08);
  --color-nav-bg: rgba(13, 15, 24, 0.85);
  --shadow-s: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-m: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.4);
}

/* Cosmic Orange — warm dark, vibrant orange accent */
[data-theme="cosmic-orange"] {
  --color-bg: #111015;
  --color-surface: #1a1820;
  --color-elevated: #222028;
  --color-text-1: #f5efe8;
  --color-text-2: #b0a898;
  --color-text-3: #7a7268;
  --color-accent: #F77E2D;
  --color-accent-hover: #ff9a52;
  --color-border: #2a2824;
  --color-border-subtle: #201e1a;
  --color-chip-bg: #2a2620;
  --color-chip-text: #b0a898;
  --color-glow: rgba(247, 126, 45, 0.10);
  --color-nav-bg: rgba(17, 16, 21, 0.85);
  --shadow-s: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-m: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.4);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}

/* Subtle background glow */
body::before {
  content: '';
  position: fixed;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse, var(--color-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}