/* Zaba color tokens — generated from Figma "Light" export. */
/* W3C design-tokens -> CSS custom properties. Do not edit by hand. */
:root {

  /* Accents */
  --color-accent-blue: #62b7fc;
  --color-accent-brown: #a17558;
  --color-accent-coral: #fc7664;
  --color-accent-green: #02c24f;
  --color-accent-pink: #fc64b8;
  --color-accent-yellow: #ffcc33;

  /* Blue */
  --color-blue-50: #e5f3fe;
  --color-blue-100: #cbe7fe;
  --color-blue-200: #b2dbfd;
  --color-blue-300: #98cffd;
  --color-blue-400: #7ec3fc;
  --color-blue-600: #2b9dfb;
  --color-blue-700: #0581e6;
  --color-blue-800: #0460ac;
  --color-blue-900: #024073;
  --color-blue-950: #012039;

  /* Brown */
  --color-brown-50: #f0e8e3;
  --color-brown-100: #e0d1c7;
  --color-brown-200: #d1baab;
  --color-brown-300: #c1a38f;
  --color-brown-400: #b28c73;
  --color-brown-600: #86624a;
  --color-brown-700: #6b4e3b;
  --color-brown-800: #513b2c;
  --color-brown-900: #36271e;
  --color-brown-950: #1b140f;

  /* Coral */
  --color-coral-50: #fee8e5;
  --color-coral-100: #fed1cb;
  --color-coral-200: #fdbab2;
  --color-coral-300: #fda498;
  --color-coral-400: #fc8d7e;
  --color-coral-600: #fb432b;
  --color-coral-700: #e61f05;
  --color-coral-800: #ac1704;
  --color-coral-900: #730f02;
  --color-coral-950: #390801;

  /* Green */
  --color-green-50: #cbfedf;
  --color-green-100: #97fec0;
  --color-green-200: #62fda0;
  --color-green-300: #2efd81;
  --color-green-400: #02f463;
  --color-green-600: #02a041;
  --color-green-700: #018034;
  --color-green-800: #016027;
  --color-green-900: #01401a;
  --color-green-950: #00200d;

  /* Pink */
  --color-pink-50: #fee5f3;
  --color-pink-100: #fecbe7;
  --color-pink-200: #fdb2db;
  --color-pink-300: #fd98cf;
  --color-pink-400: #fc7ec3;
  --color-pink-600: #fb2b9d;
  --color-pink-700: #e60581;
  --color-pink-800: #ac0460;
  --color-pink-900: #730240;
  --color-pink-950: #390120;

  /* Yellow */
  --color-yellow-50: #fff6dd;
  --color-yellow-100: #ffeebb;
  --color-yellow-200: #ffe699;
  --color-yellow-300: #ffdd77;
  --color-yellow-400: #ffd555;
  --color-yellow-600: #ffbf00;
  --color-yellow-700: #cc9900;
  --color-yellow-800: #997300;
  --color-yellow-900: #664d00;
  --color-yellow-950: #332600;

  /* Backgrounds */
  --color-bg-primary: #f6f4f5;
  --color-bg-secondary: #ececed;
  --color-bg-tertiary: #ffffff;

  /* Fills */
  --color-blue-fill: rgba(98, 183, 252, 0.15);
  --color-brown-fill: rgba(161, 117, 88, 0.15);
  --color-coral-fill: rgba(252, 118, 100, 0.15);
  --color-green-fill: rgba(2, 194, 79, 0.15);
  --color-pink-fill: rgba(252, 100, 184, 0.15);
  --color-yellow-fill: rgba(255, 204, 51, 0.15);
  --color-fill-primary: rgba(120, 120, 120, 0.2);
  --color-fill-secondary: rgba(120, 120, 128, 0.16);
  --color-fill-tertiary: rgba(118, 118, 128, 0.12);
  --color-fill-quaternary: rgba(116, 116, 128, 0.08);

  /* Labels */
  --color-label-blue: #0581e6;
  --color-label-brown: #6b4e3b;
  --color-label-coral: #e61f05;
  --color-label-gray: #333333;
  --color-label-green: #018034;
  --color-label-pink: #ac0460;
  --color-label-yellow: #cc9900;
  --color-label-link: #0581e6;
  --color-label-primary: #1b140f;
  --color-label-secondary: rgba(60, 60, 67, 0.6);
  --color-label-disabled: rgba(60, 60, 67, 0.3);
  --color-label-quaternary: rgba(60, 60, 67, 0.18);

  /* Grays */
  --color-white: #ffffff;
  --color-gray-1: #8e8e93;
  --color-gray-2: #aeaeb2;
  --color-gray-3: #c7c7cc;
  --color-gray-4: #d1d1d6;
  --color-gray-5: #e5e5ea;
  --color-gray-6: #f2f2f7;
  --color-black: #0b090a;

}