/* Appier Admin design tokens.
 *
 * FROZEN. Agents working on views must not edit this file - if a value is
 * missing, add a token here rather than a literal in a view, and say so.
 *
 * Neutral surfaces, one accent. The deck's forest green was too much colour for
 * a tool that gets left open all day, so the brand now appears only where it
 * carries meaning: active state, primary action, series slot 1. Everything else
 * is greyscale.
 *
 * Light is the default. Dark is a selected second mode with its own steps, not
 * an inversion - series colours are re-stepped for the dark surface and both
 * columns pass all six checks of the dataviz validator.
 */

:root {
  color-scheme: light;

  --bg:        #FFFFFF;
  --surface-1: #F7F8F7;
  --surface-2: #EFF1EF;
  --surface-3: #E6E9E6;
  --line:      #E3E6E4;
  --line-strong: #CFD4D0;

  --ink-1: #16191A;
  --ink-2: #4A5250;
  --ink-3: #78817E;

  --accent:      #00918A;
  --accent-ink:  #FFFFFF;
  --accent-weak: #E6F2F1;

  --series-1: #00918A;
  --series-2: #cf5423;
  --series-3: #4a3aa7;
  --series-4: #a67400;
  --series-5: #c94b7b;

  --good:     #2E7D4F;
  --warning:  #8A5A00;
  --serious:  #B4531C;
  --critical: #B33A3A;

  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 8px scale. These five are the only spacings a view should use. */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;  --s6: 32px;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* The sticky chrome states its own height so a view can offset against it
   * rather than guessing. kit.css pins .topbar and .tabs to these, so they
   * stay true. Anything sticky inside main sits below --chrome-h. */
  --topbar-h: 56px;
  --tabs-h: 36px;
  --chrome-h: calc(var(--topbar-h) + var(--tabs-h));

  --shadow-1: 0 1px 2px rgba(16,25,26,.06), 0 1px 3px rgba(16,25,26,.04);
  --shadow-2: 0 8px 24px rgba(16,25,26,.10);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #0F1113;
  --surface-1: #171A1C;
  --surface-2: #1E2225;
  --surface-3: #262A2C;
  --line:      #262A2C;
  --line-strong: #363B3E;

  --ink-1: #F2F4F3;
  --ink-2: #AEB6B4;
  --ink-3: #79817F;

  --accent:      #00A39A;
  --accent-ink:  #06201F;
  --accent-weak: #102C2A;

  --series-1: #00A39A;
  --series-2: #d95926;
  --series-3: #9085e9;
  --series-4: #c98500;
  --series-5: #d55181;

  --good:     #5FB87E;
  --warning:  #C98500;
  --serious:  #D9773A;
  --critical: #E06B6B;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 30px rgba(0,0,0,.5);
}