/* ============================================================ brand palette
   Raw brand colours. Components never use these directly; they use the
   semantic theme tokens below. Kept identical to prototype.html. */
:root {
  --brand-deep: #1E5F7A;
  --brand-teal: #2A9DB0;
  --brand-green: #8BC34A;
  --brand-gold: #F5A623;
  --brand-navy: #1E4E6B;

  --radius: 18px;
  --radius-sm: 12px;
  --font: "Poppins", "Avenir Next", "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ============================================================ light theme */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --surface-2: #F0F4F6;
  --border: #E1E8EC;
  --border-strong: #C9D4DB;

  --text: #1E4E6B;
  --text-2: #4F6A7B;
  --text-3: #566E7C;

  --primary: #1E5F7A;
  --on-primary: #FFFFFF;
  --primary-soft: rgba(42, 157, 176, 0.12);
  --accent-teal: #2A9DB0;

  --gold: #F5A623;
  --on-gold: #2B1D05;
  --gold-text: #975A00;
  --gold-soft: rgba(245, 166, 35, 0.16);

  --green: #8BC34A;
  --on-green: #1C2E0B;
  --green-text: #4A7A1B;
  --green-soft: rgba(139, 195, 74, 0.18);

  --danger: #C23B33;
  --danger-soft: rgba(194, 59, 51, 0.09);

  --track: #E4ECF0;
  --scrim: rgba(14, 32, 43, 0.42);
  --shadow: 0 1px 2px rgba(30, 78, 107, 0.05);
  --shadow-lg: 0 18px 50px rgba(30, 78, 107, 0.18);
  --toast-bg: #1E4E6B;
  --toast-text: #FFFFFF;
  --hero-bg: linear-gradient(135deg, rgba(42, 157, 176, 0.10), rgba(139, 195, 74, 0.05) 60%, rgba(255, 255, 255, 0)), var(--surface);
  --logo-tile: #FFFFFF;
  --logo-tile-border: #E1E8EC;

  --stage: #E8EEF1;
  --bezel: #DDE5EA;

  --chat-bg: #EFEAE2;
  --chat-bubble: #D9FDD3;
  --chat-text: #111B21;
  --chat-meta: #667781;

  --cat-rapido: #D48A06;
  --cat-uber: #1E5F7A;
  --cat-auto: #5F9128;
  --cat-food: #D9603F;
  --cat-supplies: #2A9DB0;
  --cat-other: #7A8C97;
}

/* ============================================================= dark theme */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1A20;
  --surface: #16242C;
  --surface-2: #1D2E37;
  --border: #263A44;
  --border-strong: #355060;

  --text: #E6EFF3;
  --text-2: #A9BCC6;
  --text-3: #8399A4;

  --primary: #3BB3C8;
  --on-primary: #06222B;
  --primary-soft: rgba(59, 179, 200, 0.16);
  --accent-teal: #3BB3C8;

  --gold: #F5A623;
  --on-gold: #1F1403;
  --gold-text: #F6B94D;
  --gold-soft: rgba(245, 166, 35, 0.16);

  --green: #8BC34A;
  --on-green: #13220A;
  --green-text: #A6D46E;
  --green-soft: rgba(139, 195, 74, 0.16);

  --danger: #F2766D;
  --danger-soft: rgba(242, 118, 109, 0.14);

  --track: #22343D;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: none;
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5);
  --toast-bg: #E6EFF3;
  --toast-text: #0F1A20;
  --hero-bg: linear-gradient(135deg, rgba(59, 179, 200, 0.16), rgba(139, 195, 74, 0.05) 60%, rgba(22, 36, 44, 0)), var(--surface);
  --logo-tile: #FFFFFF;
  --logo-tile-border: transparent;

  --stage: #071014;
  --bezel: #22323B;

  --chat-bg: #0B141A;
  --chat-bubble: #005C4B;
  --chat-text: #E9EDEF;
  --chat-meta: #A5C0B9;

  --cat-rapido: #F5A623;
  --cat-uber: #6DB8D6;
  --cat-auto: #8BC34A;
  --cat-food: #FF8F70;
  --cat-supplies: #3BB3C8;
  --cat-other: #9DAEB7;
}

/* ================================================================== base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
input, select, textarea { font: inherit; color: var(--text); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 10px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.primary-text { color: var(--primary); }
.green-text { color: var(--green-text); }
.gold-text { color: var(--gold-text); }
.danger-text { color: var(--danger); }