/* ============================================================
   DESIGN TOKENS / CSS CUSTOM PROPERTIES
   Mapped from original iOS-style design system to Bootstrap 5 compatible variables
   ============================================================ */

:root {
  /* Stage / Background */
  --stage: #e6e4ec;
  --stage-2: #d4d1de;

  /* Base Colors */
  --bg: #ffffff;
  --bg2: #f2f2f7;
  --cell: #ffffff;

  /* Text Colors */
  --label: #000000;
  --label2: rgba(60, 60, 67, 0.6);
  --label3: rgba(60, 60, 67, 0.32);

  /* Separators & Fills */
  --sep: rgba(60, 60, 67, 0.22);
  --fill: rgba(118, 118, 128, 0.12);
  --fill2: rgba(118, 118, 128, 0.2);

  /* System Colors */
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --pink: #fa2d48;
  --notes: #d9a300;

  /* Message Bubbles */
  --bubble-them: #e9e9eb;
  --bubble-me: #007aff;
  --bubble-sms: #34c759;

  /* Bars & UI */
  --bar: rgba(249, 249, 249, 0.86);
  --bezel: #1b1b1d;

  /* Konek / Chat */
  --kn-bg: #d9dfeb;
  --kn-them: #ffffff;
  --kn-me: #d4c6ff;
  --kn-me-fg: #1d1240;
  --kn-accent: #6b4eff;
  --kn-date: rgba(0, 0, 0, 0.09);

  /* Maps */
  --map-land: #f2efe7;
  --map-road: #ffffff;
  --map-major: #fde6a6;
  --map-park: #cfe8c2;
  --map-water: #a8d2f1;
  --map-label: #48484a;
  --map-area: rgba(60, 60, 67, 0.45);

  /* Tint (dynamic per app) */
  --tint: var(--blue);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wordmark: "Fraunces", Georgia, "Times New Roman", serif;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms cubic-bezier(0.2, 0.9, 0.25, 1);
  --transition-slow: 400ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stage: #121214;
    --stage-2: #1d1c22;
    --bg: #000000;
    --bg2: #000000;
    --cell: #1c1c1e;
    --label: #ffffff;
    --label2: rgba(235, 235, 245, 0.6);
    --label3: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.6);
    --fill: rgba(118, 118, 128, 0.24);
    --fill2: rgba(118, 118, 128, 0.32);
    --blue: #0a84ff;
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --pink: #ff375f;
    --notes: #ffcc00;
    --bubble-them: #262628;
    --bubble-me: #0a84ff;
    --bubble-sms: #30d158;
    --bar: rgba(22, 22, 24, 0.86);
    --bezel: #2a2a2e;
    --kn-bg: #15171e;
    --kn-them: #2a2c35;
    --kn-me: #6b4eff;
    --kn-me-fg: #ffffff;
    --kn-accent: #a08cff;
    --kn-date: rgba(255, 255, 255, 0.08);
    --map-land: #24252a;
    --map-road: #3a3b42;
    --map-major: #5c5340;
    --map-park: #233829;
    --map-water: #1c3450;
    --map-label: #e5e5ea;
    --map-area: rgba(235, 235, 245, 0.4);
    color-scheme: dark;
  }
}

/* Explicit dark theme */
:root[data-theme="dark"] {
  --stage: #121214;
  --stage-2: #1d1c22;
  --bg: #000000;
  --bg2: #000000;
  --cell: #1c1c1e;
  --label: #ffffff;
  --label2: rgba(235, 235, 245, 0.6);
  --label3: rgba(235, 235, 245, 0.3);
  --sep: rgba(84, 84, 88, 0.6);
  --fill: rgba(118, 118, 128, 0.24);
  --fill2: rgba(118, 118, 128, 0.32);
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff453a;
  --orange: #ff9f0a;
  --pink: #ff375f;
  --notes: #ffcc00;
  --bubble-them: #262628;
  --bubble-me: #0a84ff;
  --bubble-sms: #30d158;
  --bar: rgba(22, 22, 24, 0.86);
  --bezel: #2a2a2e;
  --kn-bg: #15171e;
  --kn-them: #2a2c35;
  --kn-me: #6b4eff;
  --kn-me-fg: #ffffff;
  --kn-accent: #a08cff;
  --kn-date: rgba(255, 255, 255, 0.08);
  --map-land: #24252a;
  --map-road: #3a3b42;
  --map-major: #5c5340;
  --map-park: #233829;
  --map-water: #1c3450;
  --map-label: #e5e5ea;
  --map-area: rgba(235, 235, 245, 0.4);
  color-scheme: dark;
}

/* Light theme override */
:root[data-theme="light"] {
  --stage: #e6e4ec;
  --stage-2: #d4d1de;
  --bg: #ffffff;
  --bg2: #f2f2f7;
  --cell: #ffffff;
  --label: #000000;
  --label2: rgba(60, 60, 67, 0.6);
  --label3: rgba(60, 60, 67, 0.32);
  --sep: rgba(60, 60, 67, 0.22);
  --fill: rgba(118, 118, 128, 0.12);
  --fill2: rgba(118, 118, 128, 0.2);
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --pink: #fa2d48;
  --notes: #d9a300;
  --bubble-them: #e9e9eb;
  --bubble-me: #007aff;
  --bubble-sms: #34c759;
  --bar: rgba(249, 249, 249, 0.86);
  --bezel: #1b1b1d;
  --kn-bg: #d9dfeb;
  --kn-them: #ffffff;
  --kn-me: #d4c6ff;
  --kn-me-fg: #1d1240;
  --kn-accent: #6b4eff;
  --kn-date: rgba(0, 0, 0, 0.09);
  --map-land: #f2efe7;
  --map-road: #ffffff;
  --map-major: #fde6a6;
  --map-park: #cfe8c2;
  --map-water: #a8d2f1;
  --map-label: #48484a;
  --map-area: rgba(60, 60, 67, 0.45);
  color-scheme: light;
}

/* Bootstrap 5 Variable Overrides for consistency */
:root {
  --bs-body-font-family: var(--font);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--label);
  --bs-primary: var(--blue);
  --bs-success: var(--green);
  --bs-danger: var(--red);
  --bs-warning: var(--orange);
  --bs-info: var(--pink);
  --bs-secondary: var(--notes);
  --bs-light: var(--bg2);
  --bs-dark: var(--label);
  --bs-border-color: var(--sep);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);
}