/* The published brand's colours (packages/tokens/src/css.ts) — loaded after the compiled stylesheet, so these win. */

:root {
  --ls-palette-canopy: #0F2B23;
  --ls-palette-spruce: #1C4A3C;
  --ls-palette-canvas: #F2EFE9;
  --ls-palette-ember: #F2541B;
  --ls-palette-critical: #8E1B14;
  --ls-palette-ink: #14130F;
  --ls-palette-white: #FFFFFF;
  --ls-palette-black: #000000;
  --ls-n900: #14130F;
  --ls-n800: #2A2A26;
  --ls-n700: #45453F;
  --ls-n600: #61615A;
  --ls-n500: #82827A;
  --ls-n400: #A6A69D;
  --ls-n300: #C9C9C0;
  --ls-n200: #E0DED7;
  --ls-n100: #EBE9E2;
  --ls-n050: #F2EFE9;

  /* One colour per crew, in slot order; -on is the ink its numeral wears. */
  --ls-crew-1: #1F5FBF;
  --ls-crew-1-on: #FFFFFF;
  --ls-crew-2: #B0307F;
  --ls-crew-2-on: #FFFFFF;
  --ls-crew-3: #F2C230;
  --ls-crew-3-on: #14130F;
  --ls-crew-4: #55C7E0;
  --ls-crew-4-on: #14130F;
  --ls-crew-5: #7A4A1F;
  --ls-crew-5-on: #FFFFFF;

  /* What a Now card is about: the ink of its icon and its kind's words. */
  --ls-kind-sales: #1C4A3C;
  --ls-kind-customers: #1F5FBF;
  --ls-kind-money: #806A00;
  --ls-kind-crew: #7A4A1F;
  --ls-kind-weather: #0B6E8A;
  --ls-kind-team: #9A2A6B;
  --ls-kind-paperwork: #61615A;
  /* A line of work's badge, as the owners' emails draw it. */
  --ls-service-lawn: #1C4A3C;
  --ls-service-lawn-on: #FFFFFF;
  --ls-service-lighting: #F2C230;
  --ls-service-lighting-on: #14130F;
  --ls-service-snow: #55C7E0;
  --ls-service-snow-on: #14130F;
  /* The street map: quiet, so the crews' routes are the loudest thing on it. */
  --ls-map-land: #F2EFE9;
  --ls-map-water: #CBDDE6;
  --ls-map-park: #DFE9D3;
  --ls-map-building: #EBE9E2;
  --ls-map-road: #FFFFFF;
  --ls-map-road-casing: #E0DED7;
  --ls-map-major-road-casing: #C9C9C0;
  --ls-map-highway: #F6E2B3;
  --ls-map-highway-casing: #D9BE86;
  --ls-map-label: #61615A;
  --ls-map-place-label: #45453F;
  --ls-map-label-halo: #FFFFFF;
  /* The large mark behind a band, as the published brand has it. */
  --ls-brand-watermark: url('/api/v1/public/brand/watermark.svg');
}

/* Day theme — the default. */
:root, [data-ls-theme="day"] {
  --ls-color-background: #F2EFE9;
  --ls-color-surface: #FFFFFF;
  --ls-color-surface-raised: #F2EFE9;
  --ls-color-border: #E0DED7;
  --ls-color-text-primary: #14130F;
  --ls-color-text-secondary: #61615A;
  --ls-color-brand: #0F2B23;
  --ls-color-on-brand: #F2EFE9;
  --ls-color-brand-tint: #ECEEED;
  --ls-color-on-brand-tint: #0F2B23;
  --ls-color-action: #F2541B;
  --ls-color-on-action: #14130F;
  --ls-color-critical: #8E1B14;
  --ls-color-on-critical: #FFFFFF;
  --ls-rail-width: 4px;
  --ls-border-width: 1px;
  --ls-weight-boost: 0;
}

/*
 * Outdoor is a LIGHT theme, not a dark one. Dark themes lose in direct sun: screen
 * reflection adds luminance to dark pixels and crushes contrast exactly when it is
 * needed most. Pure white and black, borders instead of shadows, heavier type.
 */
[data-ls-theme="outdoor"] {
  --ls-color-background: #FFFFFF;
  --ls-color-surface: #FFFFFF;
  --ls-color-surface-raised: #FFFFFF;
  --ls-color-border: #000000;
  --ls-color-text-primary: #000000;
  --ls-color-text-secondary: #2A2A26;
  --ls-color-brand: #0F2B23;
  --ls-color-on-brand: #FFFFFF;
  --ls-color-brand-tint: #FFFFFF;
  --ls-color-on-brand-tint: #000000;
  --ls-color-action: #F2541B;
  --ls-color-on-action: #000000;
  --ls-color-critical: #8E1B14;
  --ls-color-on-critical: #FFFFFF;
  --ls-rail-width: 6px;
  --ls-border-width: 1.5px;
  --ls-weight-boost: 100;
}