/*
 * ═══════════════════════════════════════════════
 *  Theme Tokens  —  change these to retheme the app
 * ═══════════════════════════════════════════════
 *
 *  Colors, fonts, border-radius, and shadows
 *  used across the entire UI.
 *
 *  :root        = light mode
 *  .dark        = dark mode
 *  @media print = print mode (optional)
 *
 *  To create a new theme, override these variables
 *  in a scoped selector or via JS on <html>.
 * ═══════════════════════════════════════════════
 */

:root {
  /* ─── Background & Surface ─── */
  --color-bg: #F2F2F7;
  --color-card: #FFFFFF;
  --color-system-background: #FFFFFF;

  /* ─── Brand ─── */
  --color-primary: #0891B2;
  --color-primary-light: #E0F2FE;
  --color-primary-dark: #0E7490;
  --color-accent: #06B6D4;

  /* ─── Semantic ─── */
  --color-destructive: #FF3B30;
  --color-success: #10B981;

  /* ─── Text ─── */
  --color-label: #1C1C1E;
  --color-secondary-label: #3A3A3C;
  --color-tertiary-label: #8E8E93;

  /* ─── Borders ─── */
  --color-separator: #E5E5EA;
  --color-opaque-separator: #C6C6C8;
  --color-fill: #E5E5EA;
  --color-input-background: #FFFFFF;

  /* ─── Typography ─── */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* ─── Border Radius ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 13px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-xl: 0 8px 30px rgba(0,0,0,0.15);
}

/* ─── Dark Mode ─── */
.dark {
  --color-bg: #1C1C1E;
  --color-card: #2C2C2E;
  --color-system-background: #000000;
  --color-input-background: #1C1C1E;

  --color-primary: #06B6D4;
  --color-primary-light: #083344;
  --color-primary-dark: #0891B2;
  --color-accent: #22D3EE;

  --color-destructive: #FF453A;
  --color-success: #34D399;

  --color-label: #F2F2F7;
  --color-secondary-label: #8E8E93;
  --color-tertiary-label: #636366;

  --color-separator: #38383A;
  --color-opaque-separator: #545458;
  --color-fill: #3A3A3C;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-xl: 0 8px 30px rgba(0,0,0,0.6);
}