/*
 * Site palette = the approved app v2 palette (design/app-v2/tokens/m3-tokens.css,
 * copied verbatim): blue-tinted off-white surfaces (#F5FBFF) and neutrals,
 * plus the app's navy-tinted elevation and motion tokens.
 *
 * Loaded after m3-tokens.css, which stays as generated by tools/colors.mjs
 * because the worker's sign-in and account screens share it
 * (whimbrel-mcp/src/m3-tokens.js). When the app screens move to the v2
 * palette, fold this file into the generator and drop it.
 */
:root {
  --md-sys-color-primary: #003346;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #c2e8ff;
  --md-sys-color-on-primary-container: #001e2b;
  --md-sys-color-secondary: #526069;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #d2e2ed;
  --md-sys-color-on-secondary-container: #56656e;
  --md-sys-color-tertiary: #005c5c;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #3bcfcf;
  --md-sys-color-on-tertiary-container: #003346;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #93000a;
  --md-sys-color-surface: #f5fbff;
  --md-sys-color-on-surface: #171c1f;
  --md-sys-color-surface-variant: #d9e4eb;
  --md-sys-color-on-surface-variant: #3e484e;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f0f4f7;
  --md-sys-color-surface-container: #eaeef2;
  --md-sys-color-surface-container-high: #e4e9ec;
  --md-sys-color-surface-container-highest: #dee3e6;
  --md-sys-color-surface-dim: #d6dbde;
  --md-sys-color-surface-bright: #f5fbff;
  --md-sys-color-outline: #6e797e;
  --md-sys-color-outline-variant: #bdc8ce;
  --md-sys-color-inverse-surface: #2c3134;
  --md-sys-color-inverse-on-surface: #edf1f5;
  --md-sys-color-inverse-primary: #8ecff2;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --wb-color-success: #006b55;
  --wb-color-on-success: #ffffff;
  --wb-color-success-container: #7ef8d4;
  --wb-color-on-success-container: #002018;
  --wb-color-warning: #815500;
  --wb-color-on-warning: #ffffff;
  --wb-color-warning-container: #ffddb2;
  --wb-color-on-warning-container: #291800;
  --wb-color-violet: #3e50ce;
  --wb-color-on-violet: #ffffff;
  --wb-color-violet-container: #dfe0ff;
  --wb-color-on-violet-container: #000c61;

  /* Elevation (app v2, design-system.md section 5): navy-tinted, not black. */
  --md-sys-elevation-1: 0 1px 2px rgb(0 30 43 / 0.06), 0 1px 3px rgb(0 30 43 / 0.08);
  --md-sys-elevation-2: 0 4px 12px -2px rgb(0 30 43 / 0.10), 0 2px 4px -2px rgb(0 30 43 / 0.06);
  --md-sys-elevation-3: 0 16px 40px -8px rgb(0 30 43 / 0.20), 0 4px 10px -4px rgb(0 30 43 / 0.10);

  /* Motion (app v2, design-system.md section 7). */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-medium1: 250ms;

  /* One focus indicator everywhere: the app's 3dp teal ring at 2dp offset,
     plus a navy outer edge so it reaches 3:1 on light surfaces (teal alone
     on #F5FBFF is 1.83:1). Outline = teal; box-shadow = gap + navy edge. */
  --wb-focus-ring: 0 0 0 2px var(--md-sys-color-surface), 0 0 0 6px var(--md-sys-color-primary);
}
@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #8ecff2;
    --md-sys-color-on-primary: #003548;
    --md-sys-color-primary-container: #003346;
    --md-sys-color-on-primary-container: #c2e8ff;
    --md-sys-color-secondary: #b9c9d3;
    --md-sys-color-on-secondary: #24323a;
    --md-sys-color-secondary-container: #3a4951;
    --md-sys-color-on-secondary-container: #a8b7c1;
    --md-sys-color-tertiary: #3bcfcf;
    --md-sys-color-on-tertiary: #003346;
    --md-sys-color-tertiary-container: #004f50;
    --md-sys-color-on-tertiary-container: #6df7f6;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffdad6;
    --md-sys-color-surface: #0f1417;
    --md-sys-color-on-surface: #dee3e6;
    --md-sys-color-surface-variant: #3e484e;
    --md-sys-color-on-surface-variant: #bdc8ce;
    --md-sys-color-surface-container-lowest: #0a0f11;
    --md-sys-color-surface-container-low: #171c1f;
    --md-sys-color-surface-container: #1b2023;
    --md-sys-color-surface-container-high: #252b2d;
    --md-sys-color-surface-container-highest: #303638;
    --md-sys-color-surface-dim: #0f1417;
    --md-sys-color-surface-bright: #353a3d;
    --md-sys-color-outline: #879298;
    --md-sys-color-outline-variant: #3e484e;
    --md-sys-color-inverse-surface: #dee3e6;
    --md-sys-color-inverse-on-surface: #2c3134;
    --md-sys-color-inverse-primary: #196584;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
    --wb-color-success: #60dbb8;
    --wb-color-on-success: #00382b;
    --wb-color-success-container: #005140;
    --wb-color-on-success-container: #7ef8d4;
    --wb-color-warning: #ffb94c;
    --wb-color-on-warning: #442b00;
    --wb-color-warning-container: #624000;
    --wb-color-on-warning-container: #ffddb2;
    --wb-color-violet: #bcc2ff;
    --wb-color-on-violet: #001998;
    --wb-color-violet-container: #2135b6;
    --wb-color-on-violet-container: #dfe0ff;
  }
}