:root {
  --white: oklch(1 0 0);
  --white70a: oklch(1 0 0 / 0.7);

  --gray90: oklch(0.32 0 0);
  --gray90a: oklch(0 0 0 / 0.8);
  --gray80: oklch(0.417 0 0);
  --gray80a: oklch(0 0 0 / 0.7);
  --gray60: oklch(0.583 0 0);
  --gray60a: oklch(0 0 0 / 0.52);
  --gray50: oklch(0.748 0 0);
  --gray50a: oklch(0 0 0 / 0.32);
  --gray40: oklch(0.845 0 0);
  --gray40a: oklch(0 0 0 / 0.2);
  --gray35a: oklch(0 0 0 / 0.15);
  --gray30: oklch(0.941 0.004 286.3);
  --gray30a: oklch(0 0 0 / 0.08);
  --gray20: oklch(0.97 0 0);
  --gray20a: oklch(0 0 0 / 0.04);
  --gray5a: oklch(0 0 0 / 0.01);

  --dark90: oklch(0.356 0.049 262.4);
  --dark80: oklch(0.438 0.043 264);
  --dark60: oklch(0.585 0.03 264.3);
  --dark50: oklch(0.791 0.014 262.4);
  --dark35: oklch(0.896 0.006 255.5);
  --dark30: oklch(0.942 0.003 247.9);
  --dark30a: oklch(0.356 0.049 262.4 / 0.1);
  --dark20: oklch(0.958 0.003 264.5);
  --dark20a: oklch(0.356 0.049 262.4 / 0.07);
  --dark10: oklch(0.982 0.001 286.4);
  --dark10a: oklch(0.356 0.049 262.4 / 0.03);

  --navy90: oklch(0.348 0.084 252.8);
  --navy80: oklch(0.398 0.076 252);
  --navy70: oklch(0.452 0.069 251.6);
  --navy60: oklch(0.567 0.052 251.6);
  --navy50: oklch(0.725 0.032 251.4);
  --navy40: oklch(0.86 0.016 248);
  --navy35: oklch(0.904 0.012 252.1);
  --navy30: oklch(0.942 0.007 260.7);

  --red80: oklch(0.445 0.183 29.2);
  --red70: oklch(0.5366 0.2202 29.23);
  --red60: oklch(0.6243 0.2245 26.72);
  --red50: oklch(0.78 0.114 20);
  --red50a: oklch(0.6243 0.2245 26.72 / 0.5);
  --red40: oklch(0.885 0.052 18.2);
  --red30: oklch(0.926 0.034 15.6);
  --red20: oklch(0.956 0.022 14.1);
  --red10: oklch(0.978 0.011 17.3);

  --salmon80: oklch(0.4805 0.1487 35.65);
  --salmon60: oklch(0.657 0.21 35.4);
  --salmon50: oklch(0.816 0.1 27.8);

  --peach60: oklch(0.6965 0.1935 45.24);
  --peach50: oklch(0.854 0.09 51.9);

  --orange80: oklch(0.63 0.153 56.7);
  --orange70: oklch(0.687 0.167 56.7);
  --orange60: oklch(0.744 0.181 56.5);
  --orange55: oklch(0.799 0.151 65.3);
  --orange50: oklch(0.866 0.102 69.1);
  --orange50a: oklch(0.744 0.181 56.5 / 0.47);
  --orange40: oklch(0.912 0.066 69.8);
  --orange40a: oklch(0.744 0.181 56.5 / 0.3);
  --orange30: oklch(0.94 0.044 70.5);
  --orange30a: oklch(0.744 0.181 56.5 / 0.2);
  --orange20: oklch(0.97 0.022 69.8);
  --orange20a: oklch(0.744 0.181 56.5 / 0.1);

  --melon80: oklch(0.6675 0.1414 74.13);
  --melon60: oklch(0.8012 0.1687 74.33);
  --melon50: oklch(0.902 0.107 85.5);
  --melon30: oklch(0.949 0.052 84);

  --yellow80: oklch(0.7042 0.1441 92.71);
  --yellow70: oklch(0.7858 0.1598 92.65);
  --yellow60: oklch(0.8643 0.1754 93.03);
  --yellow50: oklch(0.905 0.146 96.3);
  --yellow40: oklch(0.929 0.108 96.7);
  --yellow20: oklch(0.967 0.05 97.4);

  --pear60: oklch(0.8029 0.1654 107.29);
  --pear50: oklch(0.909 0.098 106.9);

  --wasabi60: oklch(0.7375 0.1614 125.43);
  --wasabi50: oklch(0.889 0.076 121.7);
  --wasabi80: oklch(0.525 0.128 126.6);

  --grass60: oklch(0.685 0.158 141.1);
  --grass55: oklch(0.796 0.103 143.7);
  --grass50: oklch(0.857 0.07 147.4);

  --green80: oklch(0.438 0.115 152.1);
  --green70: oklch(0.554 0.148 151.4);
  --green60: oklch(0.6451 0.1464 155.14);
  --green50: oklch(0.801 0.088 160.5);
  --green50a: oklch(0.6451 0.1464 155.14 / 0.53);
  --green40: oklch(0.898 0.049 163);
  --green30: oklch(0.938 0.034 163.2);
  --green20: oklch(0.968 0.024 163.2);
  --green20a: oklch(0.738 0.1936 151.72 / 0.1);
  --green10: oklch(0.983 0.011 167.8);

  --blue90: oklch(0.442 0.099 249);
  --blue80: oklch(0.495 0.113 249.4);
  --blue70: oklch(0.545 0.129 250.5);
  --blue60: oklch(0.614 0.145 250);
  --blue55: oklch(0.718 0.104 247.1);
  --blue50: oklch(0.83 0.062 246.4);
  --blue50a: oklch(0.614 0.145 250 / 0.43);
  --blue40: oklch(0.9 0.036 246.9);
  --blue30: oklch(0.931 0.028 243.1);
  --blue20: oklch(0.954 0.019 240.7);
  --blue20a: oklch(0.6313 0.1921 253.46 / 0.11);
  --blue10: oklch(0.982 0.008 241.7);

  --cobalt90: oklch(0.211 0.067 254);
  --cobalt80: oklch(0.319 0.112 256.8);
  --cobalt70: oklch(0.417 0.155 258);
  --cobalt60: oklch(0.517 0.148 253.7);

  --iris60: oklch(0.556 0.14 289.4);

  --violet80: oklch(0.426 0.111 322);
  --violet60: oklch(0.547 0.149 322.3);
  --violet50: oklch(0.796 0.066 322);
  --violet40: oklch(0.888 0.034 321.4);
  --violet20: oklch(0.946 0.016 319.4);
  --violet20a: oklch(0.547 0.149 322.3 / 0.12);

  --pink60: oklch(0.632 0.182 354.6);
  --pink55: oklch(0.731 0.127 351.5);

  --beige80: oklch(0.546 0.068 68);
  --beige70: oklch(0.69 0.074 68.2);
  --beige60: oklch(0.771 0.055 69.6);
  --beige50: oklch(0.858 0.062 70.1);
  --beige30: oklch(0.914 0.037 70);

  --twitter60: oklch(0.7001 0.1688 244.8);
  --twitter50: oklch(0.806 0.111 238);

  --twitterx60: oklch(0 0 0 / 1);

  --threads60: oklch(0 0 0 / 1);

  --tiktok60: oklch(0 0 0 / 1);

  --facebook60: oklch(0.507 0.156 254.7);
  --facebook50: oklch(0.697 0.094 250.2);

  --pinterest60: oklch(0.505 0.202 25.8);
  --pinterest50: oklch(0.657 0.136 14.6);

  --linkedin60: oklch(0.5458 0.1302 242.27);
  --linkedin50: oklch(0.672 0.103 233.8);
  
  --instagram60: oklch(0.6426 0.258 5.59 / 1);
  
  --perplexity60: oklch(0.553 0.0856 208.69);


  /* text */
  --text--primary: var(--gray90);
  --text--secondary: var(--gray60a);
  --text--tertiary: var(--gray50a);
  
  --text--iconFill: var(--gray35a);
  --text--iconFillMuted: var(--gray30a);
  --text--lightIconFill: var(--white); /* not in design system */

  --text--dark: var(--dark90);

  --text--accent: var(--orange60);

  --text--danger: var(--red60);
  --text--dangerContrast: var(--red70);

  --text--success: var(--green60);
  --text--successContrast: var(--green70);

  --text--warning: var(--yellow60);
  --text--warningContrast: var(--yellow80);

  --text--info: var(--blue60);
  --text--debug: var(--violet60);

  --text--link: var(--cobalt70);
  --text--url: var(--green70);

  --text--badgeBlack: var(--gray90);

  --text--twitter: var(--twitter60);
  --text--facebook: var(--facebook60);
  --text--pinterest: var(--pinterest60);
  --text--linkedin: var(--linkedin60);
  --text--perplexity: var(--perplexity60);


  /* border */
  --border--line: var(--gray30);
  --border--lineAlpha: var(--gray30a);
  
  --border--control: var(--gray40);
  --border--controlAlpha: var(--gray40a);
  --border--controlHover: var(--gray50);
  --border--controlHoverAlpha: var(--gray50a);
  --border--controlDisabled: var(--dark35);

  --border--selected: var(--beige50);
  --border--selectedHover: var(--beige60);
  --border--selectedActive: var(--beige70);
  --border--selectedMuted: var(--beige30);

  --border--accent: var(--orange60);

  --border--danger: var(--red60);
  --border--dangerMuted: var(--red40);
  --border--dangerMutedHover: var(--red50);

  --border--success: var(--green60);
  --border--warning: var(--yellow60);
  --border--info: var(--blue60);

  --border--linkBase: var(--blue50a);
  --border--linkUrl: var(--green50a);
  --border--linkNeutral: var(--gray50a);
  --border--linkMuted: var(--gray40a);
  --border--linkHardMuted: var(--gray30a);
  --border--linkAccent: var(--orange50a);
  --border--linkAccentHardMuted: var(--orange30a);
  --border--linkDanger: var(--red50a);
  --border--linkSuccess: var(--green50a);
  --border--linkWarning: var(--yellow70);
  --border--avatar: var(--white); /* not in design system */


  /* background */
  --background--page: var(--dark30);
  --background--negative: var(--gray90);

  --background--box: var(--white);
  --background--boxHover: var(--dark10a);
  --background--boxDark: var(--dark10);
  --background--boxDarkAlpha: var(--dark10a);
  --background--boxDarker: var(--dark20);
  
  --background--controlHover: var(--gray20a);
  --background--controlHoverMuted: var(--dark10);
  --background--controlActive: var(--gray40a);
  --background--controlDisabled: var(--dark20);
  --background--controlDisabledAlpha: var(--dark20a);

  --background--checkboxHover: var(--dark30a);
  --background--checkboxActive: var(--gray40a);
  
  --background--favicon: var(--dark30);

  --background--sidebarItemHover: var(--dark10a);
  --background--sidebarItemSelected: var(--dark20a);
  
  --background--knob: var(--white);
  --background--track: var(--gray40a);
  --background--trackHover: var(--gray50a);
  
  --background--overlay: var(--gray60a);
  --background--overlayDark: var(--gray90a);
  --background--overlayBox: var(--white70a);

  --background--code: var(--gray20);
  --background--codeAlpha: var(--gray20a);

  --background--neutral: var(--gray60);
  --background--neutralMidMuted: var(--gray30);
  --background--neutralMidMutedAlpha: var(--gray30a);

  --background--accent: var(--orange60);
  --background--accentHover: var(--orange70);
  --background--accentActive: var(--orange80);
  --background--accentSoftMuted: var(--orange50);
  --background--accentMidMuted: var(--orange40);
  --background--accentUnderMuted: var(--orange30);
  --background--accentMuted: var(--orange20);

  --background--selected: var(--orange40);
  --background--selectedActive: var(--orange50);
  --background--selectedMuted: var(--orange20);
  --background--selectedMutedAlpha: var(--orange20a);

  --background--danger: var(--red60);
  --background--dangerHover: var(--red70);
  --background--dangerActive: var(--red80);
  --background--dangerMidMuted: var(--red40);
  --background--dangerMuted: var(--red20);
  --background--dangerHardMuted: var(--red10);
  --background--dangerNofillHover: var(--red20);
  --background--dangerNofillActive: var(--red40);

  --background--success: var(--green60);
  --background--successHover: var(--green70);
  --background--successMidMuted: var(--green40);
  --background--successMuted: var(--green20);
  --background--successHardMuted: var(--green10);

  --background--warning: var(--yellow60);
  --background--warningMidMuted: var(--yellow40);
  --background--warningMuted: var(--yellow20);

  --background--info: var(--blue60);
  --background--infoMidMuted: var(--blue40);
  --background--infoMuted: var(--blue20);

  --background--twitter: var(--twitter60);
  --background--twitterx: var(--twitterx60);
  --background--threads: var(--threads60);
  --background--tiktok: var(--tiktok60);
  --background--facebook: var(--facebook60);
  --background--pinterest: var(--pinterest60);
  --background--linkedin: var(--linkedin60);
  --background--instagram: var(--instagram60);

  --background--avatar1: var(--red60);
  --background--avatar2: var(--orange60);
  --background--avatar3: var(--yellow60);
  --background--avatar4: var(--wasabi60);
  --background--avatar5: var(--green60);
  --background--avatar6: var(--blue60);
  --background--avatar7: var(--cobalt60);
  --background--avatar8: var(--violet60);
  --background--avatar9: var(--beige60);
  --background--avatar10: var(--red70);
  --background--avatar11: var(--orange70);
  --background--avatar12: var(--green70);
  --background--avatar13: var(--cobalt70);
  --background--avatar14: var(--red80);
  --background--avatar15: var(--orange80);
  --background--avatar16: var(--yellow80);
  --background--avatar17: var(--wasabi80);
  --background--avatar18: var(--green80);
  --background--avatar19: var(--blue80);
  --background--avatar20: var(--violet80);
  --background--avatar21: var(--beige80);
  --background--avatarEmpty: var(--dark30);

  --background--stripesGray: var(--gray30a);
  --background--stripesGrayToWhite: var(--gray30a);
  --background--stripesRed: var(--red20);


  /* chart */
  --chart--empty: var(--dark30);
  --chart--line: var(--gray30a);
  --chart--caption: var(--gray50a);

  --chart--black: var(--gray90);

  --chart--grayContrast: var(--gray80);
  --chart--grayContrastAlpha: var(--gray80a);
  --chart--gray: var(--gray60);
  --chart--grayMidMuted: var(--gray50);
  --chart--grayMidMutedAlpha: var(--gray50a);
  --chart--grayMuted: var(--gray40);
  --chart--grayBg: var(--gray20);
  --chart--grayBgAlpha: var(--gray20a); /* not in design system */

  --chart--darkContrast: var(--dark80);
  --chart--dark: var(--dark60);
  --chart--darkMidMuted: var(--dark50);
  --chart--darkHardMuted: var(--dark30);

  --chart--blueHardContrast: var(--blue90);
  --chart--blueContrast: var(--blue80);
  --chart--blueMidContrast: var(--blue70);
  --chart--blue: var(--blue60);
  --chart--blueSoftMuted: var(--blue55);
  --chart--blueMidMuted: var(--blue50);
  --chart--blueMuted: var(--blue40);
  --chart--blueHardMuted: var(--blue30);
  --chart--blueBg: var(--blue20);
  --chart--blueBgAlpha: var(--blue20a);
  --chart--blueMutedBg: var(--blue10);

  --chart--orangeContrast: var(--orange80);
  --chart--orange: var(--orange60);
  --chart--orangeSoftMuted: var(--orange55);
  --chart--orangeMidMuted: var(--orange50);
  --chart--orangeMuted: var(--orange40);
  --chart--orangeBg: var(--orange20);
  --chart--orangeBgAlpha: var(--orange20a);

  --chart--melonContrast: var(--melon80);
  --chart--melon: var(--melon60);
  --chart--melonMidMuted: var(--melon50);
  --chart--melonHardMuted: var(--melon30);

  --chart--pear: var(--pear60);

  --chart--wasabiContrast: var(--wasabi80);
  --chart--wasabi: var(--wasabi60);
  --chart--wasabiMidMuted: var(--wasabi50);

  --chart--grass: var(--grass60);
  --chart--grassSoftMuted: var(--grass55);

  --chart--greenContrast: var(--green80);
  --chart--greenMidContrast: var(--green70);
  --chart--green: var(--green60);
  --chart--greenMidMuted: var(--green50);
  --chart--greenMuted: var(--green40);
  --chart--greenHardMuted: var(--green30);
  --chart--greenBg: var(--green20);
  --chart--greenBgAlpha: var(--green20a);
  --chart--greenMutedBg: var(--green10);

  --chart--redContrast: var(--red80);
  --chart--redMidContrast: var(--red70);
  --chart--red: var(--red60);
  --chart--redMidMuted: var(--red50);
  --chart--redMuted: var(--red40);
  --chart--redHardMuted: var(--red30);
  --chart--redBg: var(--red20);
  --chart--redMutedBg: var(--red10);

  --chart--salmonContrast: var(--salmon80);
  --chart--salmon: var(--salmon60);

  --chart--peach: var(--peach60);

  --chart--pinkSoftMuted: var(--pink55);

  --chart--violetContrast: var(--violet80);
  --chart--violet: var(--violet60);
  --chart--violetMidMuted: var(--violet50);
  --chart--violetMuted: var(--violet40);
  --chart--violetBgAlpha: var(--violet20a);

  --chart--iris: var(--iris60);

  --chart--yellowContrast: var(--yellow80);
  --chart--yellow: var(--yellow60);
  --chart--yellowMidMuted: var(--yellow50);
  --chart--yellowMuted: var(--yellow40);

  --chart--navyContrast: var(--navy80);
  --chart--navy: var(--navy60);
  --chart--navyMidMuted: var(--navy50);
  --chart--navyMuted: var(--navy40);
  --chart--navySemihardMuted: var(--navy35);
  --chart--navyHardMuted: var(--navy30);

  --chart--beigeContrast: var(--beige80);
  --chart--beige: var(--beige60);
  --chart--beigeMidMuted: var(--beige50);

  --chart--cobaltHardContrast: var(--cobalt90);
  --chart--cobaltContrast: var(--cobalt80);
  --chart--cobaltMidContrast: var(--cobalt70);
  --chart--cobalt: var(--cobalt60);

  --chart--kd1: var(--green50);
  --chart--kd2: var(--grass50);
  --chart--kd3: var(--wasabi50);
  --chart--kd4: var(--pear50);
  --chart--kd5: var(--yellow40);
  --chart--kd6: var(--melon50);
  --chart--kd7: var(--orange50);
  --chart--kd8: var(--peach50);
  --chart--kd9: var(--salmon50);
  --chart--kd10: var(--red50);


  /* shadow */
  --shadow--elevation1: var(--gray5a);
  --shadow--elevation1Bottom: var(--gray20a);
  --shadow--elevation2: var(--gray30a);
  --shadow--elevation3: var(--gray35a);

  --shadow--border: var(--gray30a);

  --shadow--flag: var(--gray50a);


  /* image */
  --image--gray1: var(--gray30a);
  --image--gray2: var(--gray40a);
  --image--gray3: var(--gray50a);
  --image--gray4: var(--gray60a);

  --image--black: var(--gray90);

  --image--orange1: var(--orange30a);
  --image--orange2: var(--orange55);
  --image--orange3: var(--orange70);

  --image--yellow: var(--yellow60);

  --image--wasabi: var(--wasabi60);

  --image--pdf1: var(--red50);
  --image--pdf2: var(--red80);

  --image--csv1: var(--green50);
  --image--csv2: var(--green80);
  
  --image--zip1: var(--melon50);
  --image--zip2: var(--melon80);

  --image--toolHoverStroke: var(--blue60);
  --image--toolHoverFill: var(--blue40);
  --image--toolSelectedStroke: var(--orange80);
  --image--toolSelectedFill: var(--orange40);


  /* alternative */
  --alt-dark90: oklch(0.356 0.049 262.4);
  --alt-white: oklch(1 0 0);
  --alt-white70a: oklch(1 0 0 / 0.7);
  --alt-white40a: oklch(1 0 0 / 0.3);
  --alt-white35a: oklch(1 0 0 / 0.2);
  --alt-white30a: oklch(1 0 0 / 0.15);
  --alt-white20a: oklch(1 0 0 / 0.1);
  --alt-white10: oklch(0.427 0.043 264);
  --alt-white10a: oklch(1 0 0 / 0.08);
  --alt-yellow: oklch(0.929 0.108 96.7);
  --alt-green: oklch(0.7841 0.1785 154.9);
  --alt-violet: oklch(0.766 0.134 322.3);


  /* alternative: text */
  --alt-text--primary: var(--alt-white);
  --alt-text--secondary: var(--alt-white70a);
  --alt-text--tertiary: var(--alt-white40a);
  --alt-text--negative: var(--alt-white);
  --alt-text--onBrightBg: var(--alt-white);

  --alt-text--operator: var(--alt-yellow);
  --alt-text--combinator: var(--alt-green);
  --alt-text--field: var(--alt-violet);


  /* alternative: border */
  --alt-border--line: var(--alt-white20a);
  --alt-border--controlDisabled: var(--alt-white20a);
  --alt-border--control: var(--alt-white40a);
  --alt-border--controlHover: var(--alt-white70a);
  --alt-border--linkMuted: var(--alt-white35a);
  --alt-border--linkAccent: var(--alt-white40a);


  /* alternative: background */
  --alt-background--box: var(--alt-dark90);
  --alt-background--control: var(--alt-white30a);
  --alt-background--controlHover: var(--alt-white35a);
  --alt-background--controlActive: var(--alt-white40a);
  --alt-background--neutralMuted: var(--alt-white10a);
  --alt-background--controlDisabled: var(--alt-white10);
  --alt-background--controlDisabledAlpha: var(--alt-white10a);
  --alt-background--boxHover: var(--alt-white10a);
  --alt-background--badgeWhite: var(--alt-white);
  --alt-background--stripesWhite: var(--alt-white30a);
  --alt-background--stripesWhiteToGray: var(--alt-white30a);


  /* keywords explorer */
  --ke-empty--gradient: url('#gradient-light');
  --ke-difficulty-gradient-stroke: url("#gradient-difficulty-stroke");
  --ke-difficulty-gradient-fill: url("#gradient-difficulty-fill");
  --ke-volume-gradient-fill: url("#gradient-volume-fill");
  --ke-volume-gradient-forecast-fill: url("#ke-volume-gradient-forecast-fill");

  --exports-background: oklch(0.67 0.14 243.6 / .08);
  --exports-background-hover: oklch(0.67 0.14 243.6 / .12);
}