:root {
  --text-opacity: 1;

  --action-50: rgb(240 248 254 / var(--text-opacity));
  --action-50: rgb(240 248 254 / var(--text-opacity));
  --action-100: rgb(220 238 253 / var(--text-opacity));
  --action-200: rgb(193 226 252 / var(--text-opacity));
  --action-300: rgb(151 209 249 / var(--text-opacity));
  --action-400: rgb(101 184 245 / var(--text-opacity));
  --action-500: rgb(65 154 240 / var(--text-opacity));
  --action-600: rgb(44 124 228 / var(--text-opacity));
  --action-700: rgb(36 105 214 / var(--text-opacity));
  --action-800: rgb(35 84 170 / var(--text-opacity));
  --action-900: rgb(34 73 134 / var(--text-opacity));
  --action-950: rgb(25 45 82 / var(--text-opacity));

  --black-50: rgb(246 246 246 / var(--text-opacity));
  --black-100: rgb(231 231 231 / var(--text-opacity));
  --black-200: rgb(209 209 209 / var(--text-opacity));
  --black-300: rgb(176 176 176 / var(--text-opacity));
  --black-400: rgb(136 136 136 / var(--text-opacity));
  --black-500: rgb(109 109 109 / var(--text-opacity));
  --black-600: rgb(93 93 93 / var(--text-opacity));
  --black-700: rgb(79 79 79 / var(--text-opacity));
  --black-800: rgb(69 69 69 / var(--text-opacity));
  --black-900: rgb(61 61 61 / var(--text-opacity));
  --black-950: rgb(0 0 0 / var(--text-opacity));

  --blue-50: rgb(238 253 252 / var(--text-opacity));
  --blue-100: rgb(131, 136, 227);
  --blue-200: rgb(175 242 240 / var(--text-opacity));
  --blue-400: rgb(74 217 217 / var(--text-opacity));
  --blue-600: rgb(28 150 158 / var(--text-opacity));
  --blue-800: rgb(0, 0, 238);
  --blue-900: rgb(31 82 90 / var(--text-opacity));

  --link-text: var(--blue-800);

  --dabble-blue: rgb(36, 105, 214);
  --dabble-blue-hovered: rgb(18, 58, 205);
  --dabble-blue-gradient: linear-gradient(180deg, rgba(101, 184, 245, 0.2) 0%, rgba(35, 84, 170, 0.2) 100%),
    var(--dabble-blue);
  --dabble-blue-gradient-hovered: linear-gradient(180deg, rgba(101, 184, 245, 0.2) 0%, rgba(35, 84, 170, 0.2) 100%),
    var(--dabble-blue-hovered);

  --dabble-warning: var(--warning-yellow-400);
  --dabble-warning-hovered: var(--warning-yellow-700);
  --dabble-warning-gradient: linear-gradient(180deg, rgba(245, 216, 101, 0.2) 0%, rgba(170, 154, 35, 0.2) 100%),
    var(--dabble-warning);
  --dabble-warning-gradient-hovered: linear-gradient(180deg, rgba(245, 216, 101, 0.2) 0%, rgba(170, 154, 35, 0.2) 100%),
    var(--dabble-warning-hovered);

  --dabble-danger: var(--error-red-600);
  --dabble-danger-hovered: var(--error-red-700);
  --dabble-danger-gradient: linear-gradient(180deg, rgba(245, 120, 101, 0.2) 0%, rgba(170, 53, 35, 0.2) 100%),
    var(--dabble-danger);
  --dabble-danger-gradient-hovered: linear-gradient(180deg, rgba(245, 120, 101, 0.2) 0%, rgba(170, 53, 35, 0.2) 100%),
    var(--dabble-danger-hovered);

  --error-red-50: rgb(254 242 242 / var(--text-opacity));
  --error-red-100: rgb(255 228 230 / var(--text-opacity));
  --error-red-200: rgb(254 202 202 / var(--text-opacity));
  --error-red-300: rgb(252 165 177 / var(--text-opacity));
  --error-red-400: rgb(242 100 110 / var(--text-opacity));
  --error-red-500: rgb(242 56 90 / var(--text-opacity));
  --error-red-600: rgb(220 38 38 / var(--text-opacity));
  --error-red-700: rgb(189 19 63 / var(--text-opacity));
  --error-red-800: rgb(153 27 27 / var(--text-opacity));
  --error-red-950: rgb(69 10 10 / var(--text-opacity));

  --gray-50: rgb(248 247 247 / var(--text-opacity));
  --gray-100: rgb(240 239 238 / var(--text-opacity));
  --gray-200: rgb(222 219 217 / var(--text-opacity));
  --gray-300: rgb(194 187 183 / var(--text-opacity));
  --gray-400: rgb(161 150 143 / var(--text-opacity));
  --gray-500: rgb(133 122 114 / var(--text-opacity));
  --gray-600: rgb(109 99 92 / var(--text-opacity));
  --gray-700: rgb(89 81 75 / var(--text-opacity));
  --gray-800: rgb(76 69 64 / var(--text-opacity));
  --gray-900: rgb(65 60 57 / var(--text-opacity));
  --gray-950: rgb(30 28 26 / var(--text-opacity));

  --red-100: rgb(255 228 230 / var(--text-opacity));
  --red-300: rgb(252 165 177 / var(--text-opacity));
  --red-500: rgb(242 56 90 / var(--text-opacity));
  --red-700: rgb(189 19 63 / var(--text-opacity));
  --red-950: rgb(75 6 26 / var(--text-opacity));

  --success-green-100: rgb(209 250 237 / var(--text-opacity));
  --success-green-300: rgb(110 231 193 / var(--text-opacity));
  --success-green-500: rgb(16 185 133 / var(--text-opacity));
  --success-green-700: rgb(4 120 84 / var(--text-opacity));
  --success-green-950: rgb(2 44 31 / var(--text-opacity));

  --warning-yellow-50: rgb(255 249 235 / var(--text-opacity));
  --warning-yellow-100: rgb(254 239 199 / var(--text-opacity));
  --warning-yellow-200: rgb(253 221 138 / var(--text-opacity));
  --warning-yellow-300: rgb(252 203 77 / var(--text-opacity));
  --warning-yellow-400: rgb(251 191 36 / var(--text-opacity));
  --warning-yellow-500: rgb(245 180 11 / var(--text-opacity));
  --warning-yellow-600: rgb(217 158 6 / var(--text-opacity));
  --warning-yellow-700: rgb(180 132 9 / var(--text-opacity));
  --warning-yellow-800: rgb(146 109 14 / var(--text-opacity));
  --warning-yellow-900: rgb(120 91 15 / var(--text-opacity));
  --warning-yellow-950: rgb(69 51 3 / var(--text-opacity));

  --yellow-100: rgb(255 246 197 / var(--text-opacity));
  --yellow-300: rgb(255 222 72 / var(--text-opacity));
  --yellow-500: rgb(245 165 3 / var(--text-opacity));
  --yellow-700: rgb(185 89 4 / var(--text-opacity));
  --yellow-950: rgb(71 28 1 / var(--text-opacity));

  --brand-black: rgb(0 0 0 / var(--text-opacity));
  --brand-white: rgb(255 255 255 / var(--text-opacity));

  --neutral-black: rgb(0 0 0 / var(--text-opacity));
  --neutral-neutral: var(--gray-500);
  --neutral-neutral-dark: var(--gray-700);
  --neutral-neutral-darker: var(--gray-800);
  --neutral-neutral-darkest: var(--gray-950);
  --neutral-neutral-light: var(--gray-400);
  --neutral-neutral-lighter: var(--gray-200);
  --neutral-neutral-lightest: var(--gray-100);
  --neutral-white: rgb(255 255 255 / var(--text-opacity));

  --system-error-red: var(--error-red-600);
  --system-error-red-light: var(--red-100);
  --system-success-green: var(--success-green-500);
  --system-success-green-light: var(--success-green-100);
  --system-warning-yellow: var(--warning-yellow-500);
  --system-warning-yellow-light: var(--warning-yellow-100);

  --bg-alternate: var(--neutral-black);
  --bg-error: var(--system-error-red-light);
  --bg-warn: var(--system-warning-yellow-light);
  --bg-primary: var(--neutral-white);
  --bg-ultimate: var(--neutral-neutral-black);
  --bg-secondary: var(--neutral-neutral-lightest);
  --bg-success: var(--system-success-green-light);
  --bg-tertiary: var(--neutral-neutral-dark);
  --bg-paper: url('/images/textured-background-light.jpg') top left / 1024px 683px repeat fixed #f0efee;

  --border-alternate: var(--neutral-white);
  --border-error: var(--system-error-red);
  --border-warn: var(--system-warning-yellow);
  --border-primary: var(--gray-100);
  --border-secondary: var(--neutral-neutral-lighter);
  --border-success: var(--system-success-green);
  --border-tertiary: var(--neutral-neutral-dark);

  --border-single-primary: 1px solid var(--border-primary);
  --border-single-secondary: 1px solid var(--border-secondary);
  --border-single-tertiary: 1px solid var(--border-tertiary);
  --border-single-alternate: 1px solid var(--border-alternate);
  --border-single-error: 1px solid var(--border-error);
  --border-single-warn: 1px solid var(--border-warn);
  --border-single-success: 1px solid var(--border-success);

  --box-height: 3.5rem;

  --border-radius-default: 0.25rem;
  --border-radius-medium: 0.375rem;
  --border-radius-large: 0.5rem;
  --border-radius-extralarge: 0.75rem;
  --border-radius-standard: 1rem;

  --gap-standard: 0.75rem;
  --gap-baseline: 1rem;
  --gap-large: 1.5rem;

  --link-alternate: var(--gray-50);
  --link-primary: var(--gray-950);
  --link-secondary: var(--gray-800);

  --text-alternate: var(--gray-50);
  --text-alternate2: var(--neutral-neutral-lighter);
  --text-error: var(--error-red-800);
  --text-warn: var(--warning-yellow-900);
  --text-primary: var(--neutral-neutral-darkest);
  --text-secondary: rgb(0 0 0 / 60%);
  --text-ultimate: var(--neutral-white);
  --text-success: var(--success-green-700);

  --text-bold: 700;
  --text-extra-bold: 800;
  --text-light: 300;
  --text-medium: 500;
  --text-reg: 400;

  --heading-desktop-h1: 3.5rem;
  --heading-desktop-h2: 3rem;
  --heading-desktop-h3: 2.5rem;
  --heading-desktop-h4: 2rem;
  --heading-desktop-h5: 1.5rem;
  --heading-desktop-h6: 1.25rem;
  --heading-mobile-h1: 2.5rem;
  --heading-mobile-h2: 2.25rem;
  --heading-mobile-h3: 2rem;
  --heading-mobile-h4: 1.5rem;
  --heading-mobile-h5: 1.25rem;
  --heading-mobile-h6: 1.12rem;

  --text-large: 1.25rem;
  --text-medium: 1.125rem;
  --text-regular: 1rem;
  --text-small: 0.88rem;
  --text-tiny: 0.75rem;

  --text-hover-dark: 0.75;
  --text-hover-light: 0.3;
  --text-opacity-light: 0.5;

  --font-family-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-family-ui-serif: Georgia, 'Times New Roman', Times, serif;
  --font-family-text: 'PT Serif', sans-serif;
  --font-family-header: 'PT Serif', serif;

  --font-outfit: 'Outfit', sans-serif;
  --font-pt-serif: 'PT Serif', serif;

  --tooltip-background: #333;
  --tooltip-text-color: #fff;
  --tooltip-highlight: var(--dabble-yellow);

  /* Effect styles */
  --shadow-2xs: 0px 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-sm2: 0 0 0 2px rgba(0, 123, 255, 0.1);
  --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.03), 0px 12px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0px 8px 8px rgba(0, 0, 0, 0.03), 0px 20px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0px 24px 48px rgba(0, 0, 0, 0.18);
  --shadow-2xl: 0px 32px 64px rgba(0, 0, 0, 0.14);

  --shadow-inset-xs: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}
