/* ==========================================================================
   THEME.CSS
   Premium Design System - Color Palette & Typography
   ========================================================================== */

:root {
  /* --- Palette: Dark Mode (Default / "Pro") --- */
  /* Apple Pro Workflow style: Deep blacks, subtle grays */
  --bg-app: #000000;
  /* Pure black background */
  --bg-panel: #1c1c1e;
  /* Secondary background (Cards) */
  --bg-surface: #2c2c2e;
  /* Input fields / Tertiary */
  --bg-highlight: #3a3a3c;
  /* Hover states */

  --bg-overlay: rgba(0, 0, 0, 0.7);
  /* Modal backdrops */
  --glass-material: rgba(28, 28, 30, 0.65);
  /* Glassmorphism base */

  /* Borders - Very subtle in dark mode */
  --border-subtle: #2c2c2e;
  --border-default: #38383a;
  --border-strong: #48484a;

  /* Typography - SF Pro equivalents */
  --txt-primary: #ffffff;
  --txt-secondary: #8e8e93;
  /* System Gray */
  --txt-tertiary: #636366;
  /* System Gray 2 */

  /* Accents - "Electric Blue" */
  --primary-base: #0a84ff;
  /* iOS Dark Mode Blue */
  --primary-hover: #409cff;
  --primary-subtle: rgba(10, 132, 255, 0.15);
  --accent: #0a84ff;
  /* Alias for compatibility */

  /* Semantic Colors (iOS Dark Mode counterparts) */
  --success: #30d158;
  --success-bg: rgba(48, 209, 88, 0.1);
  --warning: #ffd60a;
  --warning-bg: rgba(255, 214, 10, 0.1);
  --error: #ff453a;
  --error-bg: rgba(255, 69, 58, 0.1);

  /* Shadows - Diffuse and soft */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(10, 132, 255, 0.3);

  /* Measurements */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  /* Apple-like generous curves */
  --radius-xl: 24px;
}

/* --- Light Mode Overrides --- */
body.light {
  /* Apple System Light: Off-white and Stark White */
  --bg-app: #f5f5f7;
  /* iOS System Gray 6 / App BG */
  --bg-panel: #ffffff;
  /* Pure White cards */
  --bg-surface: #f2f2f7;
  /* Inputs */
  --bg-highlight: #e5e5ea;
  /* Hover */

  --glass-material: rgba(255, 255, 255, 0.75);

  --border-subtle: #e5e5ea;
  --border-default: #d1d1d6;
  --border-strong: #c7c7cc;

  --txt-primary: #1d1d1f;
  --txt-secondary: #86868b;
  --txt-tertiary: #aeaeb2;

  /* Accents - "Classic Blue" */
  --primary-base: #0071e3;
  /* Apple Web Blue */
  --primary-hover: #0077ed;
  --primary-subtle: rgba(0, 113, 227, 0.1);
  --accent: #0071e3;

  /* Semantic Colors (iOS Light Mode) */
  --success: #34c759;
  --warning: #ffcc00;
  /* Darker yellow for text visibility usually handled by contrast */
  --error: #ff3b30;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 15px rgba(0, 113, 227, 0.2);
}

/* --- Base Typography --- */
body {
  background-color: var(--bg-app);
  color: var(--txt-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--txt-primary);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 0;
}

h1 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

a {
  color: var(--primary-base);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--primary-hover);
}