:root {
  /* Brand Colors */
  --blue: #12507e;
  --blue-dk: #0c3a5c;
  --blue-lt: #3b7fb5;
  --sky: #e8f1f8;
  --sky-2: #f4f9fc;
  --amber: #e8a33d;
  --amber-dk: #c9861f;
  --ink: #16242f;

  /* Theme Tokens - Light (Default) */
  --bg-page: #ffffff;
  --bg-surface: #f4f9fc;
  --bg-card: #ffffff;
  --text-main: #16242f;
  --text-heading: #0c3a5c;
  --text-muted: #5a6a76;
  --border: #d6e2ec;
  --border-subtle: #e4eef6;
  --shadow: 0 10px 30px rgba(12, 58, 92, 0.09);
  --shadow-lg: 0 14px 34px rgba(12, 58, 92, 0.12);
  --radius: 16px;
  --radius-lg: 24px;
  
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-border: #d6e2ec;
  --hero-bg: linear-gradient(160deg, #0c3a5c 0%, #12507e 55%, #1a6394 100%);
  --join-bg: linear-gradient(160deg, #0c3a5c 0%, #12507e 100%);
  --footer-bg: #0c3a5c;
  --footer-text: #cfe0ee;
  --footer-muted: #89aac4;

  --input-bg: #ffffff;
  --input-border: #d6e2ec;
  --input-text: #16242f;
  
  --badge-bg: #fbf1de;
  --badge-text: #c9861f;
}

/* Dark Theme overrides via class/attribute */
[data-theme="dark"] {
  --bg-page: #09141d;
  --bg-surface: #0e202f;
  --bg-card: #122536;
  --text-main: #eaf1f6;
  --text-heading: #ffffff;
  --text-muted: #9bb1c2;
  --border: #1e384e;
  --border-subtle: #162c3e;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5);

  --nav-bg: rgba(9, 20, 29, 0.92);
  --nav-border: #1e384e;
  --hero-bg: linear-gradient(160deg, #061522 0%, #0a253a 55%, #0f3450 100%);
  --join-bg: linear-gradient(160deg, #061522 0%, #0a253a 100%);
  --footer-bg: #050e16;
  --footer-text: #b6cad8;
  --footer-muted: #738f9f;

  --input-bg: #0b1c2a;
  --input-border: #1e384e;
  --input-text: #eaf1f6;

  --sky: #132a3d;
  --sky-2: #0e202f;
  --blue-lt: #5298d1;
  --badge-bg: #2d2412;
  --badge-text: #f0af4d;
}

/* Automatic dark mode if OS prefers dark and no theme attribute is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #09141d;
    --bg-surface: #0e202f;
    --bg-card: #122536;
    --text-main: #eaf1f6;
    --text-heading: #ffffff;
    --text-muted: #9bb1c2;
    --border: #1e384e;
    --border-subtle: #162c3e;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5);

    --nav-bg: rgba(9, 20, 29, 0.92);
    --nav-border: #1e384e;
    --hero-bg: linear-gradient(160deg, #061522 0%, #0a253a 55%, #0f3450 100%);
    --join-bg: linear-gradient(160deg, #061522 0%, #0a253a 100%);
    --footer-bg: #050e16;
    --footer-text: #b6cad8;
    --footer-muted: #738f9f;

    --input-bg: #0b1c2a;
    --input-border: #1e384e;
    --input-text: #eaf1f6;

    --sky: #132a3d;
    --sky-2: #0e202f;
    --blue-lt: #5298d1;
    --badge-bg: #2d2412;
    --badge-text: #f0af4d;
  }
}