/* Crux brand colors v2: 5 families x 10 steps, light and dark, plus semantic tokens. Generated by genpal2.py (OKLCH). */
:root {
  color-scheme: light dark;
  --ink-50: #f9fafd;
  --ink-100: #f1f3fc;
  --ink-200: #e9ebf3;
  --ink-300: #dddfe8;
  --ink-400: #8e9098;
  --ink-500: #75777f;
  --ink-600: #5e6067;
  --ink-700: #4b4d54;
  --ink-800: #3b3d44;
  --ink-900: #14161c;
  --blue-50: #f5f8ff;
  --blue-100: #eaf0ff;
  --blue-200: #d1ddff;
  --blue-300: #abc1ff;
  --blue-400: #7b9afc;
  --blue-500: #4968ed;
  --blue-600: #240cd7;
  --blue-700: #1d00ba;
  --blue-800: #16009a;
  --blue-900: #0f146c;
  --lime-50: #f5faef;
  --lime-100: #edfadb;
  --lime-200: #dbf8ae;
  --lime-300: #c2f263;
  --lime-400: #a0d343;
  --lime-500: #7fb41a;
  --lime-600: #639500;
  --lime-700: #497600;
  --lime-800: #335800;
  --lime-900: #1e3c00;
  --coral-50: #fff5f3;
  --coral-100: #ffeeeb;
  --coral-200: #ffddd6;
  --coral-300: #fec2b7;
  --coral-400: #f5a091;
  --coral-500: #e77765;
  --coral-600: #d2402e;
  --coral-700: #b31e0d;
  --coral-800: #88180c;
  --coral-900: #5c170e;
  --amber-50: #fdf7ee;
  --amber-100: #fff1de;
  --amber-200: #ffe4bf;
  --amber-300: #ffcf8b;
  --amber-400: #ffb224;
  --amber-500: #dd9300;
  --amber-600: #b97600;
  --amber-700: #955b00;
  --amber-800: #724200;
  --amber-900: #502b00;

  --color-bg: #ffffff;
  --color-bg-subtle: var(--ink-50);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-inverse: var(--ink-900);
  --color-text-heading: var(--ink-900);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-700);
  --color-text-disabled: var(--ink-400);
  --color-text-link: var(--blue-600);
  --color-text-on-brand: #ffffff;
  --color-border-subtle: var(--ink-200);
  --color-border: var(--ink-300);
  --color-border-strong: var(--ink-400);
  --color-border-brand: var(--blue-600);
  --color-icon: var(--ink-800);
  --color-brand: var(--blue-600);
  --color-brand-hover: var(--blue-700);
  --color-brand-pressed: var(--blue-800);
  --color-brand-subtle: var(--blue-50);
  --color-brand-subtle-hover: var(--blue-100);
  --color-fill-hover: var(--ink-100);
  --color-fill-selected: var(--blue-100);
  --color-fill-disabled: var(--ink-100);
  --color-focus: var(--blue-600);
  /* Pure grey on purpose: the ink scale is blue-tinted. */
  --color-data-holdout: #c2c2c2;
  --color-success: var(--lime-300);
  --color-success-subtle: var(--lime-200);
  --color-success-text: var(--lime-900);
  --color-success-on: var(--ink-900);
  --color-danger: var(--coral-600);
  --color-danger-subtle: var(--coral-200);
  --color-danger-text: var(--coral-800);
  --color-danger-on: #ffffff;
  --color-warning: var(--amber-400);
  --color-warning-subtle: var(--amber-50);
  --color-warning-text: var(--amber-900);
  --color-warning-on: var(--ink-900);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-50: #0c0d11;
    --ink-100: #15161a;
    --ink-200: #202126;
    --ink-300: #2c2e32;
    --ink-400: #676870;
    --ink-500: #7e8088;
    --ink-600: #90929a;
    --ink-700: #a2a4ac;
    --ink-800: #bbbdc6;
    --ink-900: #eceef7;
    --blue-50: #070c1e;
    --blue-100: #0a1234;
    --blue-200: #111b4d;
    --blue-300: #182572;
    --blue-400: #3545fc;
    --blue-500: #3a4fff;
    --blue-600: #3f59ff;
    --blue-700: #4562ff;
    --blue-800: #89a6ff;
    --blue-900: #e3ebff;
    --lime-50: #0d1105;
    --lime-100: #131c04;
    --lime-200: #1d2902;
    --lime-300: #293900;
    --lime-400: #b1e253;
    --lime-500: #b5e95c;
    --lime-600: #baf064;
    --lime-700: #bff76d;
    --lime-800: #cdf998;
    --lime-900: #e5fbcf;
    --coral-50: #1a0b08;
    --coral-100: #2a0f0b;
    --coral-200: #3e1610;
    --coral-300: #591b13;
    --coral-400: #a60e00;
    --coral-500: #cf3d2c;
    --coral-600: #e14f3c;
    --coral-700: #f3604b;
    --coral-800: #ff9685;
    --coral-900: #ffe4df;
    --amber-50: #160e04;
    --amber-100: #231502;
    --amber-200: #332000;
    --amber-300: #462d00;
    --amber-400: #ffb224;
    --amber-500: #ffbc5d;
    --amber-600: #ffc579;
    --amber-700: #ffd29b;
    --amber-800: #ffdfb9;
    --amber-900: #ffefdd;

    --color-bg: var(--ink-50);
    --color-bg-subtle: var(--ink-100);
    --color-surface: var(--ink-100);
    --color-surface-raised: var(--ink-200);
    --color-surface-inverse: var(--ink-900);
    --color-text-heading: var(--ink-900);
    --color-text: var(--ink-900);
    --color-text-muted: var(--ink-700);
    --color-text-disabled: var(--ink-400);
    --color-text-link: var(--blue-800);
    --color-text-on-brand: #ffffff;
    --color-border-subtle: var(--ink-200);
    --color-border: var(--ink-300);
    --color-border-strong: var(--ink-400);
    --color-border-brand: var(--blue-400);
    --color-icon: var(--ink-800);
    --color-brand: var(--blue-500);
    --color-brand-hover: var(--blue-600);
    --color-brand-pressed: var(--blue-700);
    --color-brand-subtle: var(--blue-100);
    --color-brand-subtle-hover: var(--blue-200);
    --color-fill-hover: var(--ink-200);
    --color-fill-selected: var(--blue-200);
    --color-fill-disabled: var(--ink-200);
    --color-focus: var(--blue-400);
    --color-data-holdout: #8f8f8f;
    --color-success: var(--lime-400);
    --color-success-subtle: var(--lime-100);
    --color-success-text: var(--lime-900);
    --color-success-on: var(--ink-50);
    --color-danger: var(--coral-500);
    --color-danger-subtle: var(--coral-100);
    --color-danger-text: var(--coral-800);
    --color-danger-on: #ffffff;
    --color-warning: var(--amber-400);
    --color-warning-subtle: var(--amber-100);
    --color-warning-text: var(--amber-900);
    --color-warning-on: var(--ink-50);
  }
}

/* Same values as the media block above, for a dark theme picked with the toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink-50: #0c0d11;
  --ink-100: #15161a;
  --ink-200: #202126;
  --ink-300: #2c2e32;
  --ink-400: #676870;
  --ink-500: #7e8088;
  --ink-600: #90929a;
  --ink-700: #a2a4ac;
  --ink-800: #bbbdc6;
  --ink-900: #eceef7;
  --blue-50: #070c1e;
  --blue-100: #0a1234;
  --blue-200: #111b4d;
  --blue-300: #182572;
  --blue-400: #3545fc;
  --blue-500: #3a4fff;
  --blue-600: #3f59ff;
  --blue-700: #4562ff;
  --blue-800: #89a6ff;
  --blue-900: #e3ebff;
  --lime-50: #0d1105;
  --lime-100: #131c04;
  --lime-200: #1d2902;
  --lime-300: #293900;
  --lime-400: #b1e253;
  --lime-500: #b5e95c;
  --lime-600: #baf064;
  --lime-700: #bff76d;
  --lime-800: #cdf998;
  --lime-900: #e5fbcf;
  --coral-50: #1a0b08;
  --coral-100: #2a0f0b;
  --coral-200: #3e1610;
  --coral-300: #591b13;
  --coral-400: #a60e00;
  --coral-500: #cf3d2c;
  --coral-600: #e14f3c;
  --coral-700: #f3604b;
  --coral-800: #ff9685;
  --coral-900: #ffe4df;
  --amber-50: #160e04;
  --amber-100: #231502;
  --amber-200: #332000;
  --amber-300: #462d00;
  --amber-400: #ffb224;
  --amber-500: #ffbc5d;
  --amber-600: #ffc579;
  --amber-700: #ffd29b;
  --amber-800: #ffdfb9;
  --amber-900: #ffefdd;

  --color-bg: var(--ink-50);
  --color-bg-subtle: var(--ink-100);
  --color-surface: var(--ink-100);
  --color-surface-raised: var(--ink-200);
  --color-surface-inverse: var(--ink-900);
  --color-text-heading: var(--ink-900);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-700);
  --color-text-disabled: var(--ink-400);
  --color-text-link: var(--blue-800);
  --color-text-on-brand: #ffffff;
  --color-border-subtle: var(--ink-200);
  --color-border: var(--ink-300);
  --color-border-strong: var(--ink-400);
  --color-border-brand: var(--blue-400);
  --color-icon: var(--ink-800);
  --color-brand: var(--blue-500);
  --color-brand-hover: var(--blue-600);
  --color-brand-pressed: var(--blue-700);
  --color-brand-subtle: var(--blue-100);
  --color-brand-subtle-hover: var(--blue-200);
  --color-fill-hover: var(--ink-200);
  --color-fill-selected: var(--blue-200);
  --color-fill-disabled: var(--ink-200);
  --color-focus: var(--blue-400);
  --color-data-holdout: #8f8f8f;
  --color-success: var(--lime-400);
  --color-success-subtle: var(--lime-100);
  --color-success-text: var(--lime-900);
  --color-success-on: var(--ink-50);
  --color-danger: var(--coral-500);
  --color-danger-subtle: var(--coral-100);
  --color-danger-text: var(--coral-800);
  --color-danger-on: #ffffff;
  --color-warning: var(--amber-400);
  --color-warning-subtle: var(--amber-100);
  --color-warning-text: var(--amber-900);
  --color-warning-on: var(--ink-50);
}

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