/* Generated by scripts/generate_tokens.py from web/src/uikit/foundation/tokens.json — do not edit; run `make tokens`. */

:root {
  /* color */
  --color-system-background: #eeedf2;
  --color-secondary-system-background: #e2e0e8;
  --color-tertiary-system-background: #ffffff;
  --color-label: #151417;
  --color-secondary-label: #2c2a32;
  --color-tertiary-label: #5e5a66;
  --color-quaternary-label: #807a8a;
  --color-separator: rgba(21, 20, 23, 0.11);
  --color-secondary-separator: rgba(21, 20, 23, 0.07);
  --color-prominent-separator: rgba(21, 20, 23, 0.18);
  --color-focus-ring: rgba(163, 92, 255, 0.28);
  --color-tertiary-system-fill: rgba(21, 20, 23, 0.05);
  --color-quaternary-system-fill: rgba(21, 20, 23, 0.03);
  --color-accent: #a35cff;
  --color-accent-secondary: #cfa8ff;
  --color-accent-fill: rgba(163, 92, 255, 0.10);
  --color-accent-label: #6d2fc8;
  --color-system-green: #2f7d4a;
  --color-system-green-fill: rgba(47, 125, 74, 0.12);
  --color-system-orange: #b08a2f;
  --color-system-orange-fill: rgba(176, 138, 47, 0.12);
  --color-system-red: #a23a3a;
  --color-system-red-fill: rgba(162, 58, 58, 0.12);
  --color-prominent-button-background: #141317;
  --color-prominent-button-label: #f2f0f5;
  --color-material-thin: rgba(255, 255, 255, 0.28);
  --color-material-regular: rgba(255, 255, 255, 0.5);
  --color-material-thick: rgba(255, 255, 255, 0.78);
  --color-material-bar: rgba(240, 239, 244, 0.72);
  /* shadow */
  --shadow-card: 0 1px 0 rgba(21,20,23,0.04), 0 1px 2px rgba(21,20,23,0.05);
  --shadow-soft: 0 8px 24px -10px rgba(21,20,23,0.18), 0 2px 6px rgba(21,20,23,0.06);
  --shadow-elevated: 0 30px 60px -30px rgba(21,20,23,0.35), 0 8px 24px -12px rgba(21,20,23,0.12);
  /* radius */
  --radius-mini: 6px;
  --radius-small: 10px;
  --radius-regular: 12px;
  --radius-large: 14px;
  --radius-extra-large: 18px;
  --radius-extra-extra-large: 22px;
  /* blur */
  --blur-thin: 8px;
  --blur-regular: 16px;
  --blur-thick: 24px;
  /* fontDesign */
  --font-design-default: "Inter Variable", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-design-serif: "Newsreader Variable", "Newsreader", Georgia, serif;
  --font-design-monospaced: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* animation */
  --animation-fast: 120ms ease;
  --animation-default: 180ms ease;
  --animation-slow: 300ms ease;
}

[data-theme="dark"] {
  /* color */
  --color-system-background: #17151e;
  --color-secondary-system-background: #1e1b28;
  --color-tertiary-system-background: #252230;
  --color-label: #f0eef5;
  --color-secondary-label: #ccc8d8;
  --color-tertiary-label: #b5afc4;
  --color-quaternary-label: #8a8498;
  --color-separator: rgba(240, 238, 245, 0.10);
  --color-secondary-separator: rgba(240, 238, 245, 0.06);
  --color-prominent-separator: rgba(240, 238, 245, 0.17);
  --color-focus-ring: rgba(163, 92, 255, 0.32);
  --color-tertiary-system-fill: rgba(240, 238, 245, 0.05);
  --color-quaternary-system-fill: rgba(0, 0, 0, 0.25);
  --color-accent: #b87aff;
  --color-accent-secondary: #d4aaff;
  --color-accent-fill: rgba(184, 122, 255, 0.12);
  --color-accent-label: #c490ff;
  --color-system-green: #7ed0a1;
  --color-system-green-fill: rgba(47, 125, 74, 0.22);
  --color-system-orange: #e2ba63;
  --color-system-orange-fill: rgba(176, 138, 47, 0.22);
  --color-system-red: #ef8d8d;
  --color-system-red-fill: rgba(162, 58, 58, 0.22);
  --color-prominent-button-background: #e8e4f0;
  --color-prominent-button-label: #17151e;
  --color-material-thin: rgba(255, 255, 255, 0.03);
  --color-material-regular: rgba(37, 34, 48, 0.7);
  --color-material-thick: rgba(255, 255, 255, 0.08);
  --color-material-bar: rgba(19, 18, 24, 0.78);
  /* shadow */
  --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-soft: 0 8px 24px -10px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-elevated: 0 30px 60px -30px rgba(0,0,0,0.75), 0 8px 24px -12px rgba(0,0,0,0.45);
}