/*
 * App color tokens (light + dark). Use these or Mantine's CSS variables instead of
 * hex values. Light values are the colors the app already used, so light mode looks
 * the same. :root is the light fallback for pages without the Mantine attribute.
 * Every token must exist in both blocks (src/__tests__/tokens.test.ts checks).
 */
/* Mantine's default palette, for pages that load tokens.css without Mantine (login).
 * Mantine's own stylesheet loads later and sets the same values on Mantine pages.
 * Generated from @mantine/core DEFAULT_THEME; tokens.test.ts checks it stays complete. */
:root {
  --mantine-color-black: #000;
  --mantine-color-blue-0: #e7f5ff;
  --mantine-color-blue-2: #a5d8ff;
  --mantine-color-blue-3: #74c0fc;
  --mantine-color-blue-4: #4dabf7;
  --mantine-color-blue-7: #1c7ed6;
  --mantine-color-blue-8: #1971c2;
  --mantine-color-blue-9: #1864ab;
  --mantine-color-dark-0: #C9C9C9;
  --mantine-color-dark-1: #b8b8b8;
  --mantine-color-dark-2: #828282;
  --mantine-color-dark-3: #696969;
  --mantine-color-dark-4: #424242;
  --mantine-color-dark-5: #3b3b3b;
  --mantine-color-dark-6: #2e2e2e;
  --mantine-color-dark-7: #242424;
  --mantine-color-dark-8: #1f1f1f;
  --mantine-color-gray-1: #f1f3f5;
  --mantine-color-gray-2: #e9ecef;
  --mantine-color-gray-3: #dee2e6;
  --mantine-color-gray-5: #adb5bd;
  --mantine-color-gray-7: #495057;
  --mantine-color-green-0: #ebfbee;
  --mantine-color-green-2: #b2f2bb;
  --mantine-color-green-3: #8ce99a;
  --mantine-color-green-4: #69db7c;
  --mantine-color-green-5: #51cf66;
  --mantine-color-green-8: #2f9e44;
  --mantine-color-green-9: #2b8a3e;
  --mantine-color-orange-0: #fff4e6;
  --mantine-color-orange-2: #ffd8a8;
  --mantine-color-orange-3: #ffc078;
  --mantine-color-orange-4: #ffa94d;
  --mantine-color-orange-8: #e8590c;
  --mantine-color-orange-9: #d9480f;
  --mantine-color-red-2: #ffc9c9;
  --mantine-color-red-3: #ffa8a8;
  --mantine-color-red-4: #ff8787;
  --mantine-color-red-5: #ff6b6b;
  --mantine-color-violet-0: #f3f0ff;
  --mantine-color-violet-2: #d0bfff;
  --mantine-color-violet-3: #b197fc;
  --mantine-color-violet-7: #7048e8;
  --mantine-color-violet-8: #6741d9;
  --mantine-color-violet-9: #5f3dc4;
  --mantine-color-yellow-0: #fff9db;
  --mantine-color-yellow-2: #ffec99;
  --mantine-color-yellow-3: #ffe066;
  --mantine-color-yellow-5: #fcc419;
  --mantine-color-yellow-8: #f08c00;
  --mantine-color-yellow-9: #e67700;
}

:root,
[data-mantine-color-scheme="light"] {
  --app-surface: #fff;
  --app-surface-raised: #f5f7fa;
  --app-surface-hover: #f5f5f5;
  --app-text: #333;
  --app-text-muted: #666;
  --app-text-faint: #999;
  --app-border: #ddd;
  --app-border-subtle: #e9ecef;
  --app-skeleton: #e9ecef;
  --app-skeleton-highlight: #f1f3f5;
  --app-accent: #3498db;
  --app-success: #28a745;
  --app-danger: #e74c3c;
  --app-warning: #f08c00;
  --app-chart-axis: #495057;
  --app-chart-grid: rgba(0, 0, 0, 0.1);
  --app-heading: #183b53;
  --app-text-secondary: #6c757d;
  --app-surface-sunken: #f8f9fa;
  --app-surface-pressed: #dee2e6;
  --app-accent-2: #667eea;
  --app-tap-accent: rgba(102, 126, 234, 0.1);
  --app-link: #0d6efd;
  --app-on-tile: var(--mantine-color-black);
  /* Home tiles: bg / border / bottom edge / ink (icon + subtitle) per tone. */
  --app-tile-green-bg: var(--mantine-color-green-0);
  --app-tile-green-border: var(--mantine-color-green-2);
  --app-tile-green-edge: var(--mantine-color-green-3);
  --app-tile-green-ink: #237032;
  --app-tile-orange-bg: var(--mantine-color-orange-0);
  --app-tile-orange-border: var(--mantine-color-orange-2);
  --app-tile-orange-edge: var(--mantine-color-orange-4);
  --app-tile-orange-ink: #c2410c;
  --app-tile-violet-bg: var(--mantine-color-violet-0);
  --app-tile-violet-border: var(--mantine-color-violet-2);
  --app-tile-violet-edge: var(--mantine-color-violet-3);
  --app-tile-violet-ink: var(--mantine-color-violet-7);
  --app-tile-blue-bg: var(--mantine-color-blue-0);
  --app-tile-blue-border: var(--mantine-color-blue-2);
  --app-tile-blue-edge: var(--mantine-color-blue-3);
  --app-tile-blue-ink: var(--mantine-color-blue-9);
  --app-tile-yellow-bg: var(--mantine-color-yellow-0);
  --app-tile-yellow-border: var(--mantine-color-yellow-2);
  --app-tile-yellow-edge: var(--mantine-color-yellow-5);
  --app-tile-yellow-ink: #a35200;
  --app-tile-gray-bg: var(--mantine-color-gray-1);
  --app-tile-gray-border: var(--mantine-color-gray-3);
  --app-tile-gray-edge: var(--mantine-color-gray-5);
  --app-tile-gray-ink: var(--mantine-color-gray-7);
  --app-streak-missed: var(--mantine-color-gray-3);
  --app-nav-icon-muted: #495159;
  --app-accent-hover: #2980b9;
  --app-danger-bg: #fee;
  --app-danger-strong: #c0392b;
  --app-input-border: #ccc;
  --app-text-control: #495057;
  --app-text-control-strong: #2c3e50;
  --app-control-border-strong: #bdc3c7;
  --app-control-accent: #007bff;
  --app-control-hover-bg: #e7f3ff;
  --app-control-bg: var(--mantine-color-gray-1);
  --app-control-bg-strong: var(--mantine-color-gray-2);
  --app-border-control: var(--mantine-color-gray-3);
  --app-item-border: #dde2e7;
  --app-keycap-red-bg: var(--mantine-color-red-2);
  --app-keycap-red-hover: var(--mantine-color-red-3);
  --app-keycap-green-bg: var(--mantine-color-green-2);
  --app-keycap-green-hover: var(--mantine-color-green-3);
  --app-keycap-text: var(--mantine-color-dark-7);
  /* 3D buttons: light mode uses Pressable3D.css's own values; these drive dark. */
  --app-3d-gloss: rgba(255, 255, 255, 0.65);
  --app-3d-highlight: rgba(255, 255, 255, 0);
  --app-3d-edge: rgba(0, 0, 0, 0.06);
  --app-3d-drop: rgba(0, 0, 0, 0.1);
  --app-stat-good: #1c7c4c;
  --app-control-gloss: rgba(255, 255, 255, 0.7);
  --app-control-gloss-soft: rgba(255, 255, 255, 0.6);
  --app-warning-bg: #fff9db;
  --app-warning-border: #ffe08a;
  --app-info-bg: #e7f5ff;
  --app-info-border: #339af0;
  --app-bg-8ddc8a: #8ddc8a;
  --app-bg-a3e4a2: #a3e4a2;
  --app-bg-e8f4fd: #e8f4fd;
  --app-bg-f8d7da: #f8d7da;
  --app-bg-f8f9ff: #f8f9ff;
  --app-bg-fff3cd: #fff3cd;
  --app-bg-fff4e6: #fff4e6;
  --app-border-a5d8ff: #a5d8ff;
  --app-border-d0ebff: #d0ebff;
  --app-fg-007bff: #007bff;
  --app-fg-1864ab: #1864ab;
  --app-fg-1c7ed6: #1c7ed6;
  --app-fg-1d6637: #1d6637;
  --app-fg-212529: #212529;
  --app-fg-2980b9: #2980b9;
  --app-fg-2b8a3e: #2b8a3e;
  --app-fg-2c3e50: #2c3e50;
  --app-fg-339af0: #339af0;
  --app-fg-4caf50: #4caf50;
  --app-fg-721c24: #721c24;
  --app-fg-868e96: #868e96;
  --app-fg-adb5bd: #adb5bd;
  --app-fg-ced4da: #ced4da;
  --app-fg-d9480f: #d9480f;
  --app-fg-e03131: #e03131;
  --app-fg-f44336: #f44336;
  --app-bg-9c9c9c: #9c9c9c;
  --app-bg-b0b0b0: #b0b0b0;
  --app-bg-dadada: #dadada;
  --app-bg-ebfbee: #ebfbee;
  --app-bg-f0f9ff: #f0f9ff;
  --app-bg-fff5f5: #fff5f5;
  --app-border-9c9c9c: #9c9c9c;
  --app-fg-1c64d1: #1c64d1;
  --app-fg-228be6: #228be6;
  --app-fg-495159: #495159;
  --app-fg-c92a2a: #c92a2a;
  --app-fg-e67700: #e67700;
  --app-bg-ffd8a8: #ffd8a8;
  --app-fg-e8590c: #e8590c;
  --app-chart-text: #666;
  --app-chart-grid: rgba(0, 0, 0, 0.1);
  --app-bg-f9f9f9: #f9f9f9;
  --app-bg-5a6268: #5a6268;
  --app-bg-6c757d: #6c757d;
  --app-bg-e6f2ff: #e6f2ff;
  --app-bg-e8f5e9: #e8f5e9;
  --app-bg-eceef1: #eceef1;
  --app-bg-ecf0f1: #ecf0f1;
  --app-bg-f0f0f0: #f0f0f0;
  --app-bg-f5f9ff: #f5f9ff;
  --app-bg-f7f9fb: #f7f9fb;
  --app-bg-f8fafc: #f8fafc;
  --app-bg-fdfdfd: #fdfdfd;
  --app-border-adb5bd: #adb5bd;
  --app-border-d5d8dd: #d5d8dd;
  --app-border-d9dee3: #d9dee3;
  --app-border-e2e6ea: #e2e6ea;
  --app-border-e2e8f0: #e2e8f0;
  --app-fg-0c7c59: #0c7c59;
  --app-fg-0d47a1: #0d47a1;
  --app-fg-0f3057: #0f3057;
  --app-fg-1b5e20: #1b5e20;
  --app-fg-1e6fd0: #1e6fd0;
  --app-fg-213a52: #213a52;
  --app-fg-222222: #222222;
  --app-fg-28a745: #28a745;
  --app-fg-444444: #444444;
  --app-fg-555555: #555555;
  --app-fg-697a89: #697a89;
  --app-fg-6c7c8c: #6c7c8c;
  --app-fg-718096: #718096;
  --app-fg-777777: #777777;
  --app-fg-a1a4a7: #a1a4a7;
  --app-fg-dc3545: #dc3545;
  --app-bg-guest-banner: var(--mantine-color-blue-0);
  --app-border-guest-banner: var(--mantine-color-blue-2);
  --app-streak-frozen: var(--mantine-color-blue-2);
  --app-quick-action-0: #667eea;
  --app-quick-action-1: #43e97b;
  --app-quick-action-2: #4facfe;
  --app-quick-action-3: #f093fb;
  --app-quick-action-4: #fa709a;
  --app-quick-action-5: #30cfd0;
  --app-bg-d3d6db: #d3d6db;
  --app-bg-e2e8f0: #e2e8f0;
  --app-bg-e6f4ea: #e6f4ea;
  --app-bg-f7fafc: #f7fafc;
  --app-border-b7dfc2: #b7dfc2;
  --app-border-c9ccd2: #c9ccd2;
  --app-border-ced4da: #ced4da;
  --app-border-dadce0: #dadce0;
  --app-border-ffcccc: #ffcccc;
  --app-fg-1a202c: #1a202c;
  --app-fg-1e6b34: #1e6b34;
  --app-fg-2b6cb0: #2b6cb0;
  --app-fg-2d3748: #2d3748;
  --app-fg-3c4043: #3c4043;
  --app-fg-667eea: #667eea;
  --app-fg-cc3333: #cc3333;
  --app-diagram-selected: var(--mantine-color-blue-2);
}

[data-mantine-color-scheme="dark"] {
  --app-surface: var(--mantine-color-dark-7);
  --app-surface-raised: var(--mantine-color-dark-6);
  --app-surface-hover: var(--mantine-color-dark-5);
  --app-text: var(--mantine-color-dark-0);
  --app-text-muted: var(--mantine-color-dark-1);
  --app-text-faint: var(--mantine-color-dark-2);
  --app-border: var(--mantine-color-dark-4);
  --app-border-subtle: var(--mantine-color-dark-5);
  --app-skeleton: var(--mantine-color-dark-5);
  --app-skeleton-highlight: var(--mantine-color-dark-4);
  --app-accent: var(--mantine-color-blue-4);
  --app-success: var(--mantine-color-green-5);
  --app-danger: var(--mantine-color-red-5);
  --app-warning: var(--mantine-color-yellow-5);
  --app-chart-axis: var(--mantine-color-dark-1);
  --app-chart-grid: rgba(255, 255, 255, 0.12);
  --app-heading: var(--mantine-color-dark-0);
  --app-text-secondary: var(--mantine-color-dark-1);
  --app-surface-sunken: var(--mantine-color-dark-6);
  --app-surface-pressed: var(--mantine-color-dark-4);
  --app-accent-2: #91a7ff;
  --app-tap-accent: rgba(145, 167, 255, 0.15);
  --app-link: var(--mantine-color-blue-4);
  --app-on-tile: var(--mantine-color-dark-0);
  --app-tile-green-bg: rgba(47, 158, 68, 0.16);
  --app-tile-green-border: var(--mantine-color-green-9);
  --app-tile-green-edge: var(--mantine-color-green-8);
  --app-tile-green-ink: var(--mantine-color-green-3);
  --app-tile-orange-bg: rgba(247, 103, 7, 0.16);
  --app-tile-orange-border: var(--mantine-color-orange-9);
  --app-tile-orange-edge: var(--mantine-color-orange-8);
  --app-tile-orange-ink: var(--mantine-color-orange-3);
  --app-tile-violet-bg: rgba(121, 80, 242, 0.18);
  --app-tile-violet-border: var(--mantine-color-violet-9);
  --app-tile-violet-edge: var(--mantine-color-violet-8);
  --app-tile-violet-ink: var(--mantine-color-violet-3);
  --app-tile-blue-bg: rgba(34, 139, 230, 0.16);
  --app-tile-blue-border: var(--mantine-color-blue-9);
  --app-tile-blue-edge: var(--mantine-color-blue-8);
  --app-tile-blue-ink: var(--mantine-color-blue-3);
  --app-tile-yellow-bg: rgba(250, 176, 5, 0.14);
  --app-tile-yellow-border: var(--mantine-color-yellow-9);
  --app-tile-yellow-edge: var(--mantine-color-yellow-8);
  --app-tile-yellow-ink: var(--mantine-color-yellow-3);
  --app-tile-gray-bg: var(--mantine-color-dark-6);
  --app-tile-gray-border: var(--mantine-color-dark-4);
  --app-tile-gray-edge: var(--mantine-color-dark-8);
  --app-tile-gray-ink: var(--mantine-color-dark-1);
  --app-streak-missed: var(--mantine-color-dark-4);
  --app-nav-icon-muted: var(--mantine-color-dark-1);
  --app-accent-hover: var(--mantine-color-blue-3);
  --app-danger-bg: rgba(250, 82, 82, 0.15);
  --app-danger-strong: var(--mantine-color-red-4);
  --app-input-border: var(--mantine-color-dark-4);
  --app-text-control: var(--mantine-color-dark-1);
  --app-text-control-strong: var(--mantine-color-dark-0);
  --app-control-border-strong: var(--mantine-color-dark-3);
  --app-control-accent: var(--mantine-color-blue-4);
  --app-control-hover-bg: rgba(34, 139, 230, 0.16);
  --app-control-bg: var(--mantine-color-dark-6);
  --app-control-bg-strong: var(--mantine-color-dark-5);
  --app-border-control: var(--mantine-color-dark-4);
  --app-item-border: var(--mantine-color-dark-4);
  --app-keycap-red-bg: rgba(250, 82, 82, 0.24);
  --app-keycap-red-hover: rgba(250, 82, 82, 0.32);
  --app-keycap-green-bg: rgba(64, 192, 87, 0.24);
  --app-keycap-green-hover: rgba(64, 192, 87, 0.32);
  --app-keycap-text: var(--mantine-color-dark-0);
  --app-3d-gloss: rgba(255, 255, 255, 0.1);
  --app-3d-highlight: rgba(255, 255, 255, 0.1);
  --app-3d-edge: rgba(0, 0, 0, 0.6);
  --app-3d-drop: rgba(0, 0, 0, 0.45);
  --app-stat-good: var(--mantine-color-green-4);
  --app-control-gloss: rgba(255, 255, 255, 0.08);
  --app-control-gloss-soft: rgba(255, 255, 255, 0.06);
  --app-warning-bg: rgba(250, 176, 5, 0.14);
  --app-warning-border: var(--mantine-color-yellow-9);
  --app-info-bg: rgba(34, 139, 230, 0.16);
  --app-info-border: var(--mantine-color-blue-7);
  --app-bg-8ddc8a: #1b4319;
  --app-bg-a3e4a2: #1a4319;
  --app-bg-e8f4fd: #193143;
  --app-bg-f8d7da: #43191d;
  --app-bg-f8f9ff: #191f43;
  --app-bg-fff3cd: #433919;
  --app-bg-fff4e6: #433019;
  --app-border-a5d8ff: #2e516b;
  --app-border-d0ebff: #2e516b;
  --app-fg-007bff: #7bb5f4;
  --app-fg-1864ab: #9fc6ea;
  --app-fg-1c7ed6: #89bae6;
  --app-fg-1d6637: #c5ead2;
  --app-fg-212529: #e7e9eb;
  --app-fg-2980b9: #96c3e0;
  --app-fg-2b8a3e: #b0e1ba;
  --app-fg-2c3e50: #d1dae3;
  --app-fg-339af0: #83bcec;
  --app-fg-4caf50: #a0d0a2;
  --app-fg-721c24: #eabec3;
  --app-fg-868e96: #b3b8bc;
  --app-fg-adb5bd: #adb5bd;
  --app-fg-ced4da: #ced4da;
  --app-fg-d9480f: #eda386;
  --app-fg-e03131: #e48b8b;
  --app-fg-f44336: #ee8981;
  --app-bg-9c9c9c: #424242;
  --app-bg-b0b0b0: #424242;
  --app-bg-dadada: #2b2b2b;
  --app-bg-ebfbee: #194321;
  --app-bg-f0f9ff: #193243;
  --app-bg-fff5f5: #431919;
  --app-border-9c9c9c: #595959;
  --app-fg-1c64d1: #8aaee6;
  --app-fg-228be6: #87bbe8;
  --app-fg-495159: #caced2;
  --app-fg-c92a2a: #df9090;
  --app-fg-e67700: #f5bc7f;
  --app-bg-ffd8a8: #433019;
  --app-fg-e8590c: #eea781;
  --app-chart-text: var(--mantine-color-dark-1);
  --app-chart-grid: rgba(255, 255, 255, 0.12);
  --app-bg-f9f9f9: #2b2b2b;
  --app-bg-5a6268: var(--mantine-color-dark-4);
  --app-bg-6c757d: #3f4245;
  --app-bg-e6f2ff: #192d43;
  --app-bg-e8f5e9: #1c401f;
  --app-bg-eceef1: #272d35;
  --app-bg-ecf0f1: #273235;
  --app-bg-f0f0f0: #2b2b2b;
  --app-bg-f5f9ff: #192a43;
  --app-bg-f7f9fb: #1f2e3d;
  --app-bg-f8fafc: #1c2e40;
  --app-bg-fdfdfd: #2b2b2b;
  --app-border-adb5bd: #505963;
  --app-border-d5d8dd: #444a55;
  --app-border-d9dee3: #414d58;
  --app-border-e2e6ea: #404d59;
  --app-border-e2e8f0: #344965;
  --app-fg-0c7c59: #baf3e1;
  --app-fg-0d47a1: #a5c3f1;
  --app-fg-0f3057: #cedff3;
  --app-fg-1b5e20: #caeccc;
  --app-fg-1e6fd0: #8ab4e5;
  --app-fg-213a52: #d0dde9;
  --app-fg-222222: #ebebeb;
  --app-fg-28a745: #a1e1af;
  --app-fg-444444: #d6d6d6;
  --app-fg-555555: #cccccc;
  --app-fg-697a89: #b0b8c0;
  --app-fg-6c7c8c: #b0b8bf;
  --app-fg-718096: #afb6c1;
  --app-fg-777777: #b8b8b8;
  --app-fg-a1a4a7: #abadb0;
  --app-fg-dc3545: #e28d95;
  --app-bg-guest-banner: var(--app-info-bg);
  --app-border-guest-banner: var(--mantine-color-blue-8);
  --app-streak-frozen: var(--mantine-color-blue-7);
  --app-quick-action-0: #3f4a8a;
  --app-quick-action-1: #1f7a45;
  --app-quick-action-2: #1f5f99;
  --app-quick-action-3: #8a3a94;
  --app-quick-action-4: #9a3a5c;
  --app-quick-action-5: #1d7a7b;
  --app-bg-d3d6db: #2b2b2b;
  --app-bg-e2e8f0: #1f2c3d;
  --app-bg-e6f4ea: #1c4026;
  --app-bg-f7fafc: #193243;
  --app-border-b7dfc2: #2f6a3f;
  --app-border-c9ccd2: #464a53;
  --app-border-ced4da: #424d57;
  --app-border-dadce0: #464a53;
  --app-border-ffcccc: #6b2e2e;
  --app-fg-1a202c: #e5e8ef;
  --app-fg-1e6b34: #c2eacd;
  --app-fg-2b6cb0: #9bbddf;
  --app-fg-2d3748: #d5dae3;
  --app-fg-3c4043: #d7d9db;
  --app-fg-667eea: #6f86eb;
  --app-fg-cc3333: #dc9393;
  --app-diagram-selected: var(--mantine-color-blue-8);
}

/* Same in both schemes: saturated fills that carry white text, and the
   leaderboard's dark segmented selector. */
:root {
  --app-fill-667eea: #667eea;
  --app-fill-43e97b: #43e97b;
  --app-on-pastel: #183b53;
  --app-on-fill: #fff;
  --app-fill-4facfe: #4facfe;
  --app-fill-f093fb: #f093fb;
  --app-fill-fa709a: #fa709a;
  --app-fill-30cfd0: #30cfd0;
  --app-fill-764ba2: #764ba2;
  --app-fill-f5576c: #f5576c;
  --app-fill-00f2fe: #00f2fe;
  --app-fill-38f9d7: #38f9d7;
  --app-fill-fee140: #fee140;
  --app-fill-330867: #330867;
  --app-fill-a8edea: #a8edea;
  --app-fill-fed6e3: #fed6e3;
  /* Nav group icon chips (white glyph on color). */
  --app-fill-007a58: #007a58;
  --app-fill-008f6b: #008f6b;
  --app-fill-00a580: #00a580;
  --app-fill-2cbb95: #2cbb95;
  --app-fill-3e6fc2: #3e6fc2;
  --app-fill-5a8ee4: #5a8ee4;
  --app-fill-5d646f: #5d646f;
  --app-fill-868e96: #868e96;
  --app-fill-b9454c: #b9454c;
  --app-fill-db6468: #db6468;
  --app-fill-3498db: #3498db;
  /* Free Putt: tag buttons, success modal, wind basket icon, update banner. */
  --app-fill-0056b3: #0056b3;
  --app-fill-007bff: #007bff;
  --app-fill-00ff00: #00ff00;
  --app-fill-1f618d: #1f618d;
  --app-fill-2196f3: #2196f3;
  --app-fill-2980b9: #2980b9;
  --app-fill-87ceeb: #87ceeb;
  --app-fill-90ee90: #90ee90;
  --app-fill-9c9c9c: #9c9c9c;
  --app-fill-b0b0b0: #b0b0b0;
  --app-fill-dadada: #dadada;
  --app-fill-f44336: #f44336;
  --app-fill-f5b731: #f5b731;
  --app-fill-ff6b6b: #ff6b6b;
  --app-fill-ff9800: #ff9800;
  --app-fill-ffb6c1: #ffb6c1;
  --app-fill-ffd700: #ffd700;
  --app-fill-495159: #495159;
  --app-start-edge: #0c4a85;
  --app-segment-bg: #2c333a;
  --app-segment-text: #a8b4c0;
  --app-segment-divider: #3d4650;
  --app-segment-active: #4a90e2;
  --app-fill-228be6: #228be6;
  --app-fill-ffc078: #ffc078;
  --app-fill-0f7a6b: #0f7a6b;
  --app-fill-1c64d1: #1c64d1;
  --app-fill-6b3fa0: #6b3fa0;
  --app-fill-1c7c4c: #1c7c4c;
  --app-fill-2b8a3e: #2b8a3e;
  --app-fill-2f9e44: #2f9e44;
  --app-fill-40c057: #40c057;
  --app-fill-c23616: #c23616;
  --app-fill-c92a2a: #c92a2a;
  --app-fill-fa5252: #fa5252;
  --app-fill-fd7e14: #fd7e14;
  --app-fill-80bdff: #80bdff;
  --app-fill-28a745: #28a745;
  --app-fill-dc3545: #dc3545;
  --app-fill-c82333: #c82333;
  --app-fill-1e7ae0: #1e7ae0;
  --app-fill-5568d3: #5568d3;
}