/* Northstar Family design tokens. Single source for the website (web/) and the reference
   for the app's MAUI resources. Light is the default; dark follows the system setting or
   data-theme="dark" on <html>. See design/index.html for how they are used. */

:root {
  /* Brand */
  --ns-ink: #1F2A4A;
  --ns-gold: #F2B33D;
  --ns-gold-soft: #F5C25C;
  --ns-cream: #FBF7F0;
  --ns-night: #0F1526;

  /* Surfaces and text (light) */
  --bg: #FBF7F0;
  --surface: #FFFFFF;
  --surface-2: #F3EDE2;
  --outline: #E3DBCC;
  --text: #1F2A4A;
  --text-2: #5B6478;
  --primary: #1F2A4A;
  --on-primary: #FBF7F0;
  --accent: #F2B33D;
  --on-accent: #1F2A4A;
  --danger: #C8373D;
  --on-danger: #FFFFFF;
  --scrim: rgba(15, 21, 38, .45);

  /* Device states */
  --state-live: #2E9E6A;      /* sharing: recent Fix */
  --state-paused: #5D6B8A;    /* Gepauzeerd */
  --state-silent: #9A9184;    /* Geen signaal */
  --state-ringing: #E5484D;   /* Rinkelt */
  --state-locating: #F2B33D;  /* Zoek nu in progress */

  /* Permission checklist (index.html §3, p-perms): the 36 dp icon circle of each step.
     Backgrounds are the state color mixed into the surface (ok: live 18%, to do: accent 25%,
     refused: danger 18%). The ok icon is a darker live green in light mode: --state-live on
     its own tint is only 2.8:1. Every icon here is at least 3.9:1 on its tint.
     The refused pair also draws the "!" (priority_high) wherever a refusal shows outside the
     checklist: the permissions banner on the map and the "niet gedeeld" own row (p-mine-states). */
  --step-ok-bg: #D9EEE4;
  --step-ok-fg: #21754F;
  --step-todo-bg: #FCECCE;
  --step-todo-fg: #1F2A4A;
  --step-refused-bg: #F5DBDC;
  --step-refused-fg: #C8373D;

  /* Map (illustrative; the app uses a Google Maps style with these colors) */
  --map-land: #EFE9DD;
  --map-block: #E4DCCB;
  --map-road: #FFFFFF;
  --map-major: #FFF1CC;
  --map-water: #BFD8E6;
  --map-park: #D3E5C6;
  --map-label: #8C8576;

  /* Shape */
  --radius-card: 16px;
  --radius-sheet: 24px;
  --radius-dialog: 24px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* Type */
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1526;
    --surface: #182038;
    --surface-2: #222B46;
    --outline: #2E3856;
    --text: #EEF1F8;
    --text-2: #A7B0C8;
    --primary: #F5C25C;
    --on-primary: #1F2A4A;
    --accent: #F5C25C;
    --on-accent: #1F2A4A;
    --danger: #FF6B6B;
    --on-danger: #1F2A4A;
    --scrim: rgba(0, 0, 0, .6);
    --state-live: #4CC38A;
    --state-paused: #8E9BBE;
    --state-silent: #857F74;
    --state-ringing: #FF6369;
    --state-locating: #F5C25C;
    --step-ok-bg: #213D47;
    --step-ok-fg: #4CC38A;
    --step-todo-bg: #4F4941;
    --step-todo-fg: #EEF1F8;
    --step-refused-bg: #422E41;
    --step-refused-fg: #FF6B6B;
    --map-land: #18203A;
    --map-block: #1E2742;
    --map-road: #2B3557;
    --map-major: #3A4466;
    --map-water: #13304A;
    --map-park: #1B3A33;
    --map-label: #6F7895;
  }
}

:root[data-theme="dark"] {
  --bg: #0F1526;
  --surface: #182038;
  --surface-2: #222B46;
  --outline: #2E3856;
  --text: #EEF1F8;
  --text-2: #A7B0C8;
  --primary: #F5C25C;
  --on-primary: #1F2A4A;
  --accent: #F5C25C;
  --on-accent: #1F2A4A;
  --danger: #FF6B6B;
  --on-danger: #1F2A4A;
  --scrim: rgba(0, 0, 0, .6);
  --state-live: #4CC38A;
  --state-paused: #8E9BBE;
  --state-silent: #857F74;
  --state-ringing: #FF6369;
  --state-locating: #F5C25C;
  --step-ok-bg: #213D47;
  --step-ok-fg: #4CC38A;
  --step-todo-bg: #4F4941;
  --step-todo-fg: #EEF1F8;
  --step-refused-bg: #422E41;
  --step-refused-fg: #FF6B6B;
  --map-land: #18203A;
  --map-block: #1E2742;
  --map-road: #2B3557;
  --map-major: #3A4466;
  --map-water: #13304A;
  --map-park: #1B3A33;
  --map-label: #6F7895;
}