/* MOW design tokens — the single source for the application and the dark
 * dashboards.
 *
 * Values are the reconciled average of the palettes that used to diverge
 * between the app and `assets/mow.css`; the shift is at most 2–3 per RGB
 * channel, so it is not humanly visible. The light Looker dashboard and the
 * client reports keep their own light theme.
 *
 * A theme (webapp/themes/*.json, see docs/themes.md) overrides these values; it
 * never edits this file. Derived colours below use color-mix() so a theme only
 * has to set the base colours (--mow, --green, --border, ...) and they follow.
 *
 * Generated dashboards receive this file through `dv360/table_ui.with_tables`
 * (inline in standalone exports, linked otherwise), so `assets/mow.css` no
 * longer defines a `:root`. `components/data-table.css` keeps a component-local
 * default so it also renders on the light reports.
 */
:root {
  /* Typography */
  --font-body: 'Nunito Sans', -apple-system, system-ui, sans-serif;
  --font-display: 'Nunito', sans-serif;

  /* Brand */
  --mow: #C0448F;
  --mow-light: #d4569f;
  --mow-dark: #9e3274;
  /* Accent text can be lighter/darker than filled brand controls for contrast. */
  --accent-text: var(--mow);
  --mow-faint: color-mix(in srgb, var(--mow) 9%, transparent);
  --mow-glow: color-mix(in srgb, var(--mow) 25%, transparent);

  /* Surfaces (--surface3 is the reconciled average: #2a1c38 / #251a32) */
  --bg: #0d0912;
  --surface: #171020;
  --surface2: #1f1529;
  --surface3: #281b35;
  --surface-raised: #3d2a55;
  --surface-hover: #35203c;
  --surface-sunken: #2e2040;
  --border: #3a2a4e;
  --border-faint: color-mix(in srgb, var(--mow) 15%, transparent);
  /* The embedded top menu reads this one instead of the bare background token: the light Looker dashboard defines its own. */
  --chrome-bg: var(--bg);
  --border2: color-mix(in srgb, var(--wash) 5%, transparent);

  /* Status */
  --green: #22c97a;
  --green-hover: #1db36a;
  --green-bg: color-mix(in srgb, var(--green) 8%, transparent);
  --green-border: color-mix(in srgb, var(--green) 20%, transparent);
  --yellow: #f5b731;
  --yellow-bg: color-mix(in srgb, var(--yellow) 8%, transparent);
  --yellow-border: color-mix(in srgb, var(--yellow) 20%, transparent);
  --red: #f5466b;
  --red-bg: color-mix(in srgb, var(--red) 8%, transparent);
  --red-border: color-mix(in srgb, var(--red) 20%, transparent);
  --neutral: #a0a0b4;
  --neutral-bg: color-mix(in srgb, var(--text2) 8%, transparent);
  --row-expiring: color-mix(in srgb, var(--neutral) 10%, transparent);

  /* Text */
  --text: #f0e8f5;
  --text2: #8e7aa8;
  --text3: #6a5882;
  --text-soft: #b9a7ce;
  --text-strong: #d9c8ea;
  --text-bright: #ffffff;
  --link: #7cc4ff;

  /* Text on a filled background */
  --on-mow: #ffffff;
  --on-mow-strong: #0c0614;
  --on-green: #08220f;
  --on-yellow: #000000;

  /* Filled controls. Primary buttons and selected tabs/chips/menu items read these, so a
     theme can make them a gradient or a tint instead of the solid brand colour. */
  --primary-bg: var(--mow);
  --primary-fg: var(--on-mow-strong);
  --primary-border: var(--mow);
  --primary-shadow: none;
  --active-bg: var(--mow);
  --active-fg: var(--on-mow);
  --active-border: var(--mow);

  /* Washes and shadows: white/black on dark themes, flipped on light ones */
  --wash: #ffffff;
  --shade: #000000;
  --aura: #6428a0;

  /* Radii (reconciled average of the app and dashboard scales) */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --radius-pill: 999px;
}