/*
 * SignalFlag design tokens — generated from the Figma file "Design Systems"
 * (semantic dark 7272:2221, semantic light 7124:51418, primitives 7272:873,
 * graphics dark 7272:34730 / light 7272:34828). Names are the Figma variable
 * paths with "/" → "-" and camelCase → kebab-case, e.g.
 * `status/running/tileHover` → `--status-running-tile-hover`.
 *
 * Dark is the default (the marketing site is a dark design). The light set is
 * available under `[data-theme="light"]` for anything that opts in; nothing
 * switches automatically. Semantic tokens reference primitives where the value
 * matches one, so the relationship the sheets document survives in code.
 *
 * To regenerate: re-read the variable definitions for the nodes above and
 * rewrite this file — do not hand-edit individual values.
 */

:root {
  /* color */
  --color-neutral-white: #ffffff;
  --color-neutral-black: #17171c;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #dfdfe4;
  --color-gray-300: #c7c7d1;
  --color-gray-400: #8d8d96;
  --color-gray-500: #474754;
  --color-gray-600: #3a3a44;
  --color-gray-700: #32323d;
  --color-gray-800: #2a2a33;
  --color-gray-900: #26262e;
  --color-gray-1000: #222226;
  --color-alt-gray-100: #f5f6f7;
  --color-alt-gray-200: #e8ebed;
  --color-alt-gray-300: #e0e3e6;
  --color-alt-gray-400: #cdd2d7;
  --color-alt-gray-500: #b9c0c7;
  --color-alt-gray-600: #a6afb8;
  --color-alt-gray-700: #9ba5af;
  --color-alt-gray-800: #939da8;
  --color-alt-gray-900: #3e464e;
  --color-alt-gray-1000: #2f343a;
  --color-green-100: #edfdda;
  --color-green-200: #e7fccc;
  --color-green-300: #e0fcbf;
  --color-green-400: #dafbb1;
  --color-green-500: #d3faa3;
  --color-green-600: #add889;
  --color-green-700: #87b76f;
  --color-green-800: #609556;
  --color-green-900: #3a743c;
  --color-green-1000: #145222;
  --color-purple-100: #e0cbfb;
  --color-purple-200: #dec7fb;
  --color-purple-300: #dbc2fc;
  --color-purple-400: #d9befc;
  --color-purple-500: #d6b9fc;
  --color-purple-600: #c29fed;
  --color-purple-700: #ae84de;
  --color-purple-800: #9b6ad0;
  --color-purple-900: #874fc1;
  --color-purple-1000: #7335b2;
  --color-brand-blue-100: #ebf1fe;
  --color-brand-blue-200: #d8e2fe;
  --color-brand-blue-300: #bdcffd;
  --color-brand-blue-400: #9db8fc;
  --color-brand-blue-500: #7ca0fb;
  --color-brand-blue-600: #678ef2;
  --color-brand-blue-700: #517dea;
  --color-brand-blue-800: #3c6be1;
  --color-brand-blue-900: #2659d9;
  --color-brand-blue-1000: #1b3e98;
  --color-brand-yellow-100: #f4f0e6;
  --color-brand-yellow-200: #efe5cc;
  --color-brand-yellow-300: #eed7a0;
  --color-brand-yellow-400: #f3c968;
  --color-brand-yellow-500: #fbbc28;
  --color-brand-yellow-600: #f6a20f;
  --color-brand-yellow-700: #dc880b;
  --color-brand-yellow-800: #bf730b;
  --color-brand-yellow-900: #a3610a;
  --color-brand-yellow-1000: #875008;
  --color-brand-red-100: #f5f0ef;
  --color-brand-red-200: #eee0dd;
  --color-brand-red-300: #e4c3be;
  --color-brand-red-400: #da918b;
  --color-brand-red-500: #d04848;
  --color-brand-red-600: #c3363f;
  --color-brand-red-700: #a9303d;
  --color-brand-red-800: #8f2a37;
  --color-brand-red-900: #77232e;
  --color-brand-red-1000: #5e1c25;
  --color-peach-100: #feedd6;
  --color-peach-300: #fee0b7;
  --color-peach-500: #fdd398;
  --color-peach-700: #caa97a;
  --color-peach-900: #987f5b;
  --color-cyan-100: #defef8;
  --color-cyan-300: #c5fdf3;
  --color-cyan-500: #acfcee;
  --color-cyan-700: #8acabe;
  --color-cyan-900: #67978f;
  --color-yellow-100: #fcf4ad;
  --color-yellow-200: #fcf39e;
  --color-yellow-300: #fbf08f;
  --color-yellow-400: #fbef7f;
  --color-yellow-500: #faec70;
  --color-yellow-600: #f6e263;
  --color-yellow-700: #f1d956;
  --color-yellow-800: #edcf49;
  --color-yellow-900: #e8c63c;
  --color-yellow-1000: #e4bc2f;
  --color-orange-100: #fdd0af;
  --color-orange-200: #fec79f;
  --color-orange-300: #febe90;
  --color-orange-400: #ffb580;
  --color-orange-500: #ffac70;
  --color-orange-600: #f69e5e;
  --color-orange-700: #ec904d;
  --color-orange-800: #e3813b;
  --color-orange-900: #d9732a;
  --color-orange-1000: #d06518;
  --color-red-100: #fdb8b8;
  --color-red-200: #fca6a6;
  --color-red-300: #fc9494;
  --color-red-400: #fb8282;
  --color-red-500: #fa7070;
  --color-red-600: #ef6666;
  --color-red-700: #e45c5c;
  --color-red-800: #d95151;
  --color-red-900: #ce4747;
  --color-red-1000: #c33d3d;
  --color-blue-100: #9eb9ff;
  --color-blue-200: #93b1fe;
  --color-blue-300: #87a8fd;
  --color-blue-400: #7ca0fb;
  --color-blue-500: #7097fa;
  --color-blue-600: #6388e8;
  --color-blue-700: #5579d6;
  --color-blue-800: #486bc3;
  --color-blue-900: #3a5cb1;
  --color-blue-1000: #2d4d9f;
  --color-turquoise-100: #a1dcd2;
  --color-turquoise-200: #90dbce;
  --color-turquoise-300: #7fdacb;
  --color-turquoise-400: #6ed9c7;
  --color-turquoise-500: #5dd8c3;
  --color-turquoise-600: #51ceb8;
  --color-turquoise-700: #49c0ab;
  --color-turquoise-800: #41b19d;
  --color-turquoise-900: #39a390;
  --color-turquoise-1000: #319482;
  --color-opacity-black-alpha-64: #17171ca3;
  --color-opacity-white-alpha-4: #ffffff0a;
  --color-opacity-white-alpha-64: #ffffffa3;
  --color-opacity-blue-alpha-12: #486bc31f;
  --color-opacity-red-alpha-12: #fd7b7b1f;
  --color-opacity-orange-alpha-12: #e3813b1f;
  --color-opacity-yellow-alpha-12: #edcf491f;
  --color-opacity-turquoise-alpha-12: #5dd8c31f;
  --color-opacity-transparent: #ffffff00;
}

:root {
  /* content */
  --content-primary: var(--color-neutral-white);
  --content-secondary: var(--color-gray-200);
  --content-tertiary: var(--color-gray-300);
  --content-quaternary: var(--color-gray-400);
  --content-inverse: var(--color-neutral-black);
  --content-code-green: var(--color-brand-blue-400);
  --content-code-purple: var(--color-brand-yellow-500);
  --content-action-on-primary-active: var(--color-neutral-black);
  --content-action-on-secondary-active: var(--color-neutral-white);
  --content-action-on-tertiary-active: var(--color-neutral-black);
  --content-action-on-quaternary-active: var(--color-neutral-white);
  --content-action-on-secondary-inactive: var(--color-opacity-white-alpha-64);
  --content-action-on-quaternary-inactive: var(--color-opacity-white-alpha-64);

  /* neutral */
  --neutral-light: var(--color-neutral-white);
  --neutral-dark: var(--color-neutral-black);

  /* surface */
  --surface-primary: var(--color-gray-800);
  --surface-secondary: #202025;
  --surface-tertiary: var(--color-gray-900);
  --surface-quaternary: var(--color-gray-700);
  --surface-contrast: var(--color-gray-100);
  --surface-modal: var(--color-opacity-black-alpha-64);
  --surface-elevation: var(--color-gray-700);

  /* border */
  --border-surface-primary: var(--color-gray-800);
  --border-surface-tertiary: var(--color-gray-600);
  --border-surface-quaternary: var(--color-gray-500);
  --border-surface-secondary: var(--color-gray-700);
  --border-button-primary-active: var(--color-brand-blue-500);
  --border-button-primary-hover: var(--color-brand-blue-700);
  --border-button-primary-selected: var(--color-brand-blue-500);
  --border-button-primary-inactive: var(--color-opacity-transparent);
  --border-button-secondary-active: var(--color-gray-600);
  --border-button-secondary-hover: var(--color-gray-800);
  --border-button-secondary-selected: var(--color-gray-500);
  --border-button-secondary-inactive: var(--color-gray-800);
  --border-button-tertiary-active: var(--color-gray-100);
  --border-button-tertiary-hover: var(--color-gray-200);
  --border-button-tertiary-selected: var(--color-gray-100);
  --border-button-tertiary-inactive: var(--color-gray-500);
  --border-button-quaternary-active: var(--color-opacity-transparent);
  --border-button-quaternary-hover: var(--color-opacity-transparent);
  --border-button-quaternary-selected: var(--color-opacity-white-alpha-4);
  --border-button-quaternary-inactive: var(--color-opacity-transparent);
  --border-input-warning: var(--color-orange-500);
  --border-input-error: var(--color-red-900);

  /* status */
  --status-general-background: var(--color-gray-600);
  --status-general-content: var(--color-neutral-white);
  --status-empty-background: var(--color-gray-900);
  --status-empty-content: var(--color-opacity-white-alpha-64);
  --status-queued-background: var(--color-gray-700);
  --status-queued-content: var(--color-neutral-white);
  --status-running-background: var(--color-opacity-turquoise-alpha-12);
  --status-running-content: var(--color-turquoise-500);
  --status-succeeded-background: var(--color-opacity-blue-alpha-12);
  --status-succeeded-content: var(--color-blue-500);
  --status-issues-background: var(--color-opacity-red-alpha-12);
  --status-issues-content: var(--color-red-300);
  --status-queued-tile: var(--color-gray-400);
  --status-running-tile: var(--color-turquoise-500);
  --status-succeeded-tile: var(--color-brand-blue-500);
  --status-issues-tile: var(--color-red-300);
  --status-queued-tile-hover: var(--color-gray-300);
  --status-running-tile-hover: var(--color-turquoise-200);
  --status-succeeded-tile-hover: var(--color-blue-200);
  --status-issues-tile-hover: var(--color-red-100);
  --status-warning-tile: var(--color-orange-500);
  --status-blocker-tile: var(--color-red-500);
  --status-error-tile: #ce4747cc;
  --status-warning-tile-hover: var(--color-orange-300);
  --status-blocker-tile-hover: var(--color-red-300);
  --status-error-tile-hover: #e45c5ccc;

  /* button */
  --button-primary-active: var(--color-brand-blue-500);
  --button-primary-hover: var(--color-brand-blue-700);
  --button-primary-selected: var(--color-brand-blue-700);
  --button-primary-inactive: #7ca0fb1f;
  --button-secondary-active: var(--color-gray-800);
  --button-secondary-hover: var(--color-gray-800);
  --button-secondary-selected: var(--color-gray-700);
  --button-secondary-inactive: var(--color-gray-800);
  --button-tertiary-active: var(--color-gray-100);
  --button-tertiary-hover: var(--color-gray-200);
  --button-tertiary-selected: var(--color-gray-200);
  --button-tertiary-inactive: var(--color-gray-500);
  --button-quaternary-active: var(--color-opacity-transparent);
  --button-quaternary-hover: var(--color-opacity-white-alpha-4);
  --button-quaternary-selected: var(--color-opacity-transparent);
  --button-quaternary-inactive: var(--color-opacity-transparent);

  /* graphics */
  --graphics-sticker-fill-primary: var(--color-brand-blue-500);
  --graphics-sticker-fill-secondary: var(--color-brand-yellow-500);
  --graphics-sticker-fill-tertiary: var(--color-gray-300);
  --graphics-sticker-stroke-primary: var(--color-brand-blue-500);
  --graphics-sticker-stroke-secondary: var(--color-brand-yellow-500);
  --graphics-sticker-stroke-tertiary: var(--color-gray-300);
  --graphics-element-stroke-primary: var(--color-gray-700);

  /* marketing-site */
  --marketing-site-background: #0a0b16;
}

[data-theme='light'] {
  /* content */
  --content-primary: var(--color-alt-gray-1000);
  --content-secondary: var(--color-gray-600);
  --content-tertiary: var(--color-gray-500);
  --content-quaternary: var(--color-gray-400);
  --content-inverse: var(--color-neutral-white);
  --content-code-green: var(--color-brand-blue-900);
  --content-code-purple: var(--color-brand-yellow-600);
  --content-action-on-primary-active: var(--color-neutral-white);
  --content-action-on-secondary-active: var(--color-alt-gray-1000);
  --content-action-on-tertiary-active: var(--color-neutral-white);
  --content-action-on-quaternary-active: var(--color-alt-gray-1000);
  --content-action-on-secondary-inactive: var(--color-alt-gray-700);
  --content-action-on-quaternary-inactive: var(--color-alt-gray-800);

  /* neutral */
  --neutral-light: var(--color-neutral-black);
  --neutral-dark: var(--color-gray-100);

  /* surface */
  --surface-primary: var(--color-neutral-white);
  --surface-secondary: var(--color-alt-gray-100);
  --surface-tertiary: var(--color-neutral-white);
  --surface-quaternary: var(--color-alt-gray-200);
  --surface-contrast: var(--color-alt-gray-900);
  --surface-modal: var(--color-opacity-white-alpha-64);
  --surface-elevation: var(--color-alt-gray-100);

  /* border */
  --border-surface-primary: var(--color-alt-gray-200);
  --border-surface-tertiary: var(--color-alt-gray-200);
  --border-surface-quaternary: var(--color-alt-gray-300);
  --border-surface-secondary: var(--color-alt-gray-300);
  --border-button-primary-active: var(--color-brand-blue-900);
  --border-button-primary-hover: var(--color-brand-blue-600);
  --border-button-primary-selected: var(--color-brand-blue-900);
  --border-button-primary-inactive: var(--color-opacity-transparent);
  --border-button-secondary-active: var(--color-alt-gray-300);
  --border-button-secondary-hover: var(--color-alt-gray-200);
  --border-button-secondary-selected: var(--color-alt-gray-300);
  --border-button-secondary-inactive: var(--color-alt-gray-200);
  --border-button-tertiary-active: var(--color-alt-gray-900);
  --border-button-tertiary-hover: var(--color-alt-gray-800);
  --border-button-tertiary-selected: var(--color-alt-gray-1000);
  --border-button-tertiary-inactive: var(--color-alt-gray-300);
  --border-button-quaternary-active: var(--color-opacity-transparent);
  --border-button-quaternary-hover: var(--color-gray-100);
  --border-button-quaternary-selected: var(--color-gray-200);
  --border-button-quaternary-inactive: var(--color-opacity-transparent);
  --border-input-warning: var(--color-orange-800);
  --border-input-error: var(--color-red-700);

  /* status */
  --status-general-background: var(--color-alt-gray-300);
  --status-general-content: var(--color-alt-gray-900);
  --status-empty-background: var(--color-alt-gray-200);
  --status-empty-content: var(--color-alt-gray-600);
  --status-queued-background: var(--color-alt-gray-300);
  --status-queued-content: var(--color-alt-gray-900);
  --status-running-background: var(--color-opacity-turquoise-alpha-12);
  --status-running-content: var(--color-turquoise-1000);
  --status-succeeded-background: var(--color-opacity-blue-alpha-12);
  --status-succeeded-content: var(--color-blue-700);
  --status-issues-background: var(--color-opacity-red-alpha-12);
  --status-issues-content: var(--color-red-500);
  --status-queued-tile: var(--color-gray-300);
  --status-running-tile: var(--color-turquoise-200);
  --status-succeeded-tile: var(--color-blue-200);
  --status-issues-tile: var(--color-red-100);
  --status-queued-tile-hover: var(--color-gray-400);
  --status-running-tile-hover: var(--color-turquoise-500);
  --status-succeeded-tile-hover: var(--color-brand-blue-500);
  --status-issues-tile-hover: var(--color-red-300);
  --status-warning-tile: var(--color-orange-200);
  --status-blocker-tile: var(--color-red-200);
  --status-error-tile: #e45c5ccc;
  --status-warning-tile-hover: var(--color-orange-400);
  --status-blocker-tile-hover: var(--color-red-400);
  --status-error-tile-hover: #ce4747cc;

  /* button */
  --button-primary-active: var(--color-brand-blue-900);
  --button-primary-hover: var(--color-brand-blue-600);
  --button-primary-selected: var(--color-brand-blue-600);
  --button-primary-inactive: #7ca0fb1f;
  --button-secondary-active: var(--color-neutral-white);
  --button-secondary-hover: var(--color-alt-gray-200);
  --button-secondary-selected: var(--color-alt-gray-100);
  --button-secondary-inactive: var(--color-alt-gray-200);
  --button-tertiary-active: var(--color-alt-gray-900);
  --button-tertiary-hover: var(--color-alt-gray-800);
  --button-tertiary-selected: var(--color-alt-gray-900);
  --button-tertiary-inactive: var(--color-alt-gray-300);
  --button-quaternary-active: var(--color-opacity-transparent);
  --button-quaternary-hover: var(--color-alt-gray-100);
  --button-quaternary-selected: var(--color-opacity-transparent);
  --button-quaternary-inactive: var(--color-opacity-transparent);

  /* graphics */
  --graphics-sticker-fill-primary: var(--color-brand-blue-600);
  --graphics-sticker-fill-secondary: var(--color-brand-yellow-500);
  --graphics-sticker-fill-tertiary: var(--color-gray-900);
  --graphics-sticker-stroke-primary: var(--color-brand-blue-600);
  --graphics-sticker-stroke-secondary: var(--color-brand-yellow-500);
  --graphics-sticker-stroke-tertiary: var(--color-gray-900);
  --graphics-element-stroke-primary: var(--color-gray-200);

  /* marketing-site */
  --marketing-site-background: var(--color-neutral-white);
}