/*
 * GENERATED FILE - DO NOT EDIT.
 * Source: BETKIKA-BRAND-KIT/10-DEVELOPER/brand-tokens.json
 * Rebuild: php artisan brand:build-tokens
 */
:root {
  /* Roles. What a colour is FOR - reference these. */
  --brand-primary: #0B8A3D;
  --brand-primary-light: #2FAB64;
  --brand-primary-dark: #087030;
  --brand-accent: #FFC700;
  --brand-accent-dark: #E0AE00;
  --brand-secondary: #1A5CE0;
  --brand-secondary-dark: #1449B4;
  --brand-deep: #052D14;
  --brand-chrome: #08401D;
  --brand-chrome-deep: #03200E;
  --brand-dark-surface: #052D14;
  --brand-surface-raised: #08401D;
  --brand-surface-sunken: #03200E;
  --brand-page-surface: #F2F7F3;
  --brand-card-surface: #FFFFFF;
  --brand-border-subtle: #DFEBE3;
  --brand-ink-muted: #4F6B59;
  --brand-neutral-gray: #90A69A;
  --brand-white: #FFFFFF;
  --brand-state-win: #16C784;
  --brand-state-pending: #FFD233;
  --brand-state-lost: #FF4D5A;

  /* Ramp steps, for the rare case that needs one. */
  --brand-green-50: #ECF8F0;
  --brand-green-100: #D3EEDD;
  --brand-green-200: #A7DDBB;
  --brand-green-300: #6FC793;
  --brand-green-400: #2FAB64;
  --brand-green-500: #0B8A3D;
  --brand-green-600: #087030;
  --brand-green-700: #065524;
  --brand-green-800: #08401D;
  --brand-green-900: #052D14;
  --brand-green-950: #03200E;
  --brand-yellow-100: #FFF4CC;
  --brand-yellow-200: #FFE99A;
  --brand-yellow-300: #FFDD66;
  --brand-yellow-400: #FFD233;
  --brand-yellow-500: #FFC700;
  --brand-yellow-600: #E0AE00;
  --brand-yellow-700: #B88C00;
  --brand-blue-100: #DCE8FF;
  --brand-blue-300: #8FB4FF;
  --brand-blue-400: #4E8BFF;
  --brand-blue-500: #1A5CE0;
  --brand-blue-600: #1449B4;
  --brand-blue-700: #0F3888;
  --brand-grey-25: #FAFCFB;
  --brand-grey-50: #F2F7F3;
  --brand-grey-100: #E9F0EB;
  --brand-grey-200: #DFEBE3;
  --brand-grey-300: #C2CFC7;
  --brand-grey-400: #90A69A;
  --brand-grey-500: #6E8175;
  --brand-grey-600: #4F6B59;
  --brand-grey-700: #3B4A42;
  --brand-grey-800: #26322B;
  --brand-grey-900: #17201B;
  --brand-red-400: #FF7680;
  --brand-red-500: #FF4D5A;
  --brand-red-600: #E23C49;
  --brand-mint-400: #3FD69B;
  --brand-mint-500: #16C784;
  --brand-white-500: #FFFFFF;

  /* The legacy theme, as the HSL triplets main.css consumes. */
  --dark-h: 143;
  --dark-s: 80%;
  --dark-l: 10%;
  --dark: var(--dark-h) var(--dark-s) var(--dark-l);
  --surface-h: 143;
  --surface-s: 78%;
  --surface-l: 14%;
  --surface: var(--surface-h) var(--surface-s) var(--surface-l);
  --base-h: 144;
  --base-s: 85%;
  --base-l: 29%;
  --base: var(--base-h) var(--base-s) var(--base-l);
  --accent-h: 143;
  --accent-s: 80%;
  --accent-l: 10%;
  --accent: var(--accent-h) var(--accent-s) var(--accent-l);
  --highlight-h: 47;
  --highlight-s: 100%;
  --highlight-l: 50%;
  --highlight: var(--highlight-h) var(--highlight-s) var(--highlight-l);
  --success-h: 157;
  --success-s: 80%;
  --success-l: 43%;
  --success: var(--success-h) var(--success-s) var(--success-l);
  --warning-h: 47;
  --warning-s: 100%;
  --warning-l: 60%;
  --warning: var(--warning-h) var(--warning-s) var(--warning-l);
  --danger-h: 356;
  --danger-s: 100%;
  --danger-l: 65%;
  --danger: var(--danger-h) var(--danger-s) var(--danger-l);
  --secondary-h: 147;
  --secondary-s: 11%;
  --secondary-l: 61%;
  --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
  --white-h: 0;
  --white-s: 0%;
  --white-l: 100%;
  --white: var(--white-h) var(--white-s) var(--white-l);

  --on-base: var(--white);
  --on-dark: var(--white);
  --on-highlight: var(--dark);
}