/* kwd — the colours (like current.silverservers.com's tokens-base.css). Nothing but
   colours, each named for what it does and each value only once. Always loads first.

   Use them in stylesheets as var(--…), never as a hex code. Specific parts of the
   site (charts, the keyword editor, scrollbars, health scores) have their own names
   in tokens/theme.css, pointing at these. The site is light only: there is no dark theme.

   No see-through colours here: where something needs to be see-through, mix one of
   these with transparent where it's used, so it still follows the theme:
       color-mix(in srgb,var(--white) 14%,transparent)      white at 14%
   A gradient is a base colour with see-through layers on top (docs/styling.md).

   Change a colour here and it changes everywhere. */

:root {
  /* The two absolutes */
  --white: #ffffff;
  --black: #000000;

  /* Page and panels */
  --bg: #e7eeea;
  --surface-2: #eef3f2;

  /* Text */
  --ink: #141413;
  --ink-2: #3a3f3e;
  --ink-3: #5e6362;
  --ink-4: #838988;
  --ink-disabled: #a2a8a7;

  /* Lines */
  --border: #c2c9c7;
  --border-soft: #d9e1df;

  /* The accent (the brand teal) */
  --accent-light: #5eead4;
  --accent-2: #0f8a6f;
  --accent: #0f766e;
  --accent-strong: #0b5a53;
  --accent-green: #10b981;
  --focus: #6ee7b7;

  /* The dark teal panels (New Report, sign-in) and the text on them */
  --surface-hero-green: #175f3c;
  --surface-hero: #0b3d38;
  --surface-hero-2: #0b2a24;
  --surface-hero-muted: #4c8981;
  --ink-hero: #e6f6f1;
  --ink-hero-2: #b5e0d2;
  --ink-hero-3: #8fc6b6;
  --ink-hero-accent: #a7f3d0;

  /* The highlight (the logo's lime) */
  --highlight: #a3e635;
  --highlight-light: #bef264;
  --highlight-soft: #d9f99d;

  /* Good */
  --success: #0ca30c;
  --success-2: #0c9f6a;
  --success-strong: #0a7d53;
  --success-bright: #57c49a;
  --success-light: #c8ecdc;
  --success-soft: #ecf8f3;

  /* Bad */
  --danger: #c42f2f;
  --danger-strong: #9b1c1c;
  --danger-light: #fca5a5;
  --danger-soft: #fcefee;

  /* Needs attention */
  --caution: #fab219;
  --warning: #e8930c;
  --warning-strong: #8a5a00;
  --warning-soft: #fdf3e1;

  /* Kinds of work: keyword research, health checks (SEO Reports use the accent) */
  --research: #22c55e;
  --research-strong: #15803d;
  --health: #84cc16;
  --health-strong: #4d7c0f;

  /* Charts and reports */
  --demand: #eb6834;
  --demand-strong: #b4501f;
  --feature: #c2417f;
  --you: #4a3aa7;
  --info: #7fa8ef;
}