/* Shared color roles for the React workspace and standalone entry. */
:root {
  color-scheme: light;
  --ax-charcoal-rgb: 20 23 26;
  --ax-gold-rgb: 230 184 79;
  --ax-canvas-rgb: 248 246 240;
  --ax-surface-rgb: 255 255 255;
  --ax-elevated-rgb: 255 255 255;
  --ax-soft-rgb: 241 238 229;
  --ax-interactive-rgb: 235 231 220;
  --ax-ink-rgb: var(--ax-charcoal-rgb);
  --ax-secondary-ink-rgb: 65 65 62;
  --ax-muted-rgb: 96 94 89;
  --ax-divider-rgb: 225 222 217;
  --ax-subtle-divider-rgb: 235 232 228;
  --ax-control-rgb: 132 129 124;
  --ax-strong-rgb: 91 89 85;
  --ax-inverse-rgb: 248 246 240;
  --ax-selected-rgb: 237 231 212;
  --ax-disabled-rgb: 239 237 233;
  --ax-disabled-ink-rgb: 102 100 95;
  --ax-action-edge: #846222;
  --ax-focus: #866318;
  --ax-heading-accent: #795A18;
  --ax-error: #A12628;
  --ax-error-surface: #FFF1F0;
  --ax-success: #226744;
  --ax-success-surface: #EDF6F0;
  --ax-warning: #81510D;
  --ax-warning-surface: #FFF6E5;
  --ax-info: #3E545A;
  --ax-info-surface: #EDF2F2;
  --ax-code: #F3F1EE;
  --ax-code-ink: #343431;
  --ax-overlay: rgb(20 23 26 / 42%);
  --ax-shadow-composer: 0 4px 18px -8px rgb(20 23 26 / 16%), 0 1px 3px rgb(20 23 26 / 3%);
}
:root.dark {
  color-scheme: dark;
  --ax-canvas-rgb: var(--ax-charcoal-rgb);
  --ax-surface-rgb: 30 33 36;
  --ax-elevated-rgb: 37 40 43;
  --ax-soft-rgb: 42 45 48;
  --ax-interactive-rgb: 48 50 52;
  --ax-ink-rgb: 243 241 237;
  --ax-secondary-ink-rgb: 216 213 208;
  --ax-muted-rgb: 178 175 169;
  --ax-divider-rgb: 58 60 62;
  --ax-subtle-divider-rgb: 50 52 54;
  --ax-control-rgb: 119 118 114;
  --ax-strong-rgb: 170 166 159;
  --ax-inverse-rgb: var(--ax-charcoal-rgb);
  --ax-selected-rgb: 55 53 47;
  --ax-disabled-rgb: 46 47 48;
  --ax-disabled-ink-rgb: 164 161 155;
  --ax-action-edge: transparent;
  --ax-focus: rgb(var(--ax-gold-rgb));
  --ax-heading-accent: #F2D37C;
  --ax-error: #FFB5AE;
  --ax-error-surface: #3B2529;
  --ax-success: #A2D9B9;
  --ax-success-surface: #1A352B;
  --ax-warning: #EAC58A;
  --ax-warning-surface: #3A3020;
  --ax-info: #B8D0D2;
  --ax-info-surface: #273335;
  --ax-code: #191B1D;
  --ax-code-ink: #E4E0DA;
  --ax-overlay: rgb(12 13 14 / 68%);
  --ax-shadow-composer: 0 5px 22px -8px rgb(0 0 0 / 45%);
}
:root {
  background-color: var(--ax-canvas);
  color: var(--ax-ink);
  --ax-canvas: rgb(var(--ax-canvas-rgb));
  --ax-surface: rgb(var(--ax-surface-rgb));
  --ax-elevated: rgb(var(--ax-elevated-rgb));
  --ax-soft: rgb(var(--ax-soft-rgb));
  --ax-interactive: rgb(var(--ax-interactive-rgb));
  --ax-ink: rgb(var(--ax-ink-rgb));
  --ax-secondary-ink: rgb(var(--ax-secondary-ink-rgb));
  --ax-muted: rgb(var(--ax-muted-rgb));
  --ax-divider: rgb(var(--ax-divider-rgb));
  --ax-control: rgb(var(--ax-control-rgb));
  --ax-strong: rgb(var(--ax-strong-rgb));
  --ax-inverse: rgb(var(--ax-inverse-rgb));
  --ax-brand: var(--ax-ink);
  --ax-selected: rgb(var(--ax-selected-rgb));
  --ax-on-selected: var(--ax-ink);
  --ax-disabled: rgb(var(--ax-disabled-rgb));
  --ax-disabled-ink: rgb(var(--ax-disabled-ink-rgb));
  --ax-action: rgb(var(--ax-gold-rgb));
  --ax-on-action: rgb(var(--ax-charcoal-rgb));
  --ax-action-hover: #F2D37C;
  --ax-action-pressed: #CDA03B;
  --ax-rail: rgb(var(--ax-charcoal-rgb));
  --ax-rail-text: #C9C7C0;
  --ax-on-rail: #F9F8F6;
  --ax-rail-hover: #252729;
  --ax-rail-selected: #36352E;
}