/* ZSC-BrandGuide-DRAFT.pdf, page 2. Blue and white lead; accents are secondary.
   UI tints and shades below are derived only from these six brand primitives. */
:root {
  /* Shared box corners for the workspace, dialogs, and WordPress sign-in. */
  --radius: 4px;

  --zsc-blue: #003057;
  --zsc-white: #ffffff;
  --zsc-orange: #ffa300;
  --zsc-cyan: #00aeef;
  --zsc-gray: #d0d3d4;
  --zsc-black: #000000;

  --surface: var(--zsc-white);
  --canvas: color-mix(in srgb, var(--zsc-gray) 18%, var(--zsc-white));
  --surface-subtle: color-mix(in srgb, var(--zsc-gray) 12%, var(--zsc-white));
  --surface-muted: color-mix(in srgb, var(--zsc-gray) 32%, var(--zsc-white));
  --surface-selected: color-mix(in srgb, var(--zsc-cyan) 12%, var(--zsc-white));
  --ink: color-mix(in srgb, var(--zsc-blue) 25%, var(--zsc-black));
  --muted: color-mix(in srgb, var(--zsc-gray) 45%, var(--zsc-black));
  --text-on-dark: var(--zsc-white);
  --text-on-dark-muted: var(--zsc-gray);
  --line: var(--zsc-gray);
  --control-border: color-mix(in srgb, var(--zsc-blue) 55%, var(--zsc-gray));

  --navy: var(--zsc-blue);
  --navy-deep: color-mix(in srgb, var(--zsc-blue) 85%, var(--zsc-black));
  --gold: var(--zsc-orange);
  --green: var(--success-text);
  --action: var(--zsc-blue);
  --action-hover: var(--navy-deep);
  --accent: var(--zsc-orange);
  --accent-hover: color-mix(in srgb, var(--zsc-orange) 85%, var(--zsc-white));
  --focus: var(--zsc-blue);
  --focus-on-dark: var(--zsc-orange);

  --info-bg: color-mix(in srgb, var(--zsc-cyan) 12%, var(--zsc-white));
  --info-text: var(--zsc-blue);
  --info-border: var(--zsc-cyan);
  --success-bg: color-mix(in srgb, var(--zsc-blue) 8%, var(--zsc-white));
  --success-text: var(--zsc-blue);
  --success-border: var(--zsc-blue);
  --warning-bg: color-mix(in srgb, var(--zsc-orange) 12%, var(--zsc-white));
  --warning-text: var(--zsc-blue);
  --warning-border: var(--zsc-orange);
  --danger-bg: color-mix(in srgb, var(--zsc-orange) 18%, var(--zsc-white));
  --danger-text: var(--zsc-black);
  --danger-border: var(--zsc-black);
  --danger-solid: var(--zsc-black);
  --danger-hover: var(--navy-deep);
  --neutral-bg: var(--surface-muted);
  --neutral-text: var(--zsc-blue);

  --shadow-color: color-mix(in srgb, var(--zsc-blue) 17%, transparent);
  --overlay: color-mix(in srgb, var(--zsc-blue) 50%, transparent);
  --overlay-strong: color-mix(in srgb, var(--zsc-blue) 70%, transparent);
  --on-dark-hover: color-mix(in srgb, var(--zsc-white) 8%, transparent);
  --on-dark-selected: color-mix(in srgb, var(--zsc-white) 12%, transparent);
  --on-dark-line: color-mix(in srgb, var(--zsc-white) 20%, transparent);
  --chart-1: var(--zsc-blue);
  --chart-2: var(--zsc-orange);
  --chart-3: var(--zsc-cyan);
  --chart-4: var(--zsc-gray);
  --chart-5: var(--zsc-black);
}