/* Base color building blocks */
body {
  --red-100: #e91e6333;
  --red-200: #e91e6366;
  --red-300: #e91e6399;
  --red-400: #e91e63cc;
  --red-500: #e91e63ff;
  --green-100: #60C68933;
  --green-200: #60C68966;
  --green-300: #60C68999;
  --green-400: #60C689cc;
  --green-500: #60C689ff;
  --yellow-100: #e8c03f33;
  --yellow-200: #e8c03f66;
  --yellow-300: #e8c03f99;
  --yellow-400: #e8c03fcc;
  --yellow-500: #e8c03fff;
  --blue-100: #272AB033;
  --blue-200: #272AB066;
  --blue-300: #272AB099;
  --blue-400: #272AB0cc;
  --blue-500: #272AB0ff;
  --aqua-100: #57acdc33;
  --aqua-200: #57acdc66;
  --aqua-300: #57acdc99;
  --aqua-400: #57acdccc;
  --aqua-500: #57acdcff;
  --black-0: #0506071a;
  --black-20: #0506071f;
  --black-40: #05060724;
  --black-60: #05060729;
  --black-80: #0506072e;
  --black-100: #05060733;
  --black-200: #05060766;
  --black-300: #05060799;
  --black-400: #050607cc;
  --black-500: #050607ff;
  --white-0: #f4f8fa0a;
  --white-20: #f4f8fa0f;
  --white-40: #f4f8fa14;
  --white-60: #f4f8fa19;
  --white-80: #f4f8fa1e;
  --white-100: #f4f8fa33;
  --white-200: #f4f8fa66;
  --white-300: #f4f8fa99;
  --white-400: #f4f8facc;
  --white-500: #f4f8faff;
}

/* Base spacing & sizing */
body {
  --space-0: 5px;
  --space-100: 8px;
  --space-200: 12px;
  --space-300: 18px;
  --space-400: 27px;
  --space-500: 41px;
  --space-600: 62px;
  --space-700: 93px;
  --size-s: 16px;
  --size-m: 24px;
  --size-l: 32px;
  --size-xl: 40px;
  --size-xxl: 48px;
  --border-s: 1px;
  --border-m: 2px;
  --border-l: 4px;
  --text-size-xs: 0.6rem;
  --text-size-s: 0.8rem;
  --text-size-m: 1rem;
  --text-size-l: 1.3rem;
  --heading-size-xs: 2rem;
  --heading-size-s: 2.6rem;
  --heading-size-m: 3.5rem;
  --heading-size-l: 6.2rem;
  --radius-s: 3px;
  --radius-m: 6px;
  --radius-l: 10px;
  --radius-pill: 10000px;
  --radius-round: 50%;
}

/* Mobile spacing & sizing overrides */
@media (max-width: 1000px) {
  body {
    --heading-size-s: 2rem;
    --heading-size-m: 2.6rem;
    --heading-size-l: 3.6rem;
  }
}
/* Base fonts */
body {
  --font-heading: "Teko", sans-serif;
  --font-primary: "Poppins", sans-serif;
  --font-system: "Inconsolata", monospace;
}

/* Semantic static colors */
body {
  --color-primary: var(--aqua-500);
  --color-subtle-primary: color-mix(in srgb, var(--color-primary), transparent 80%);
  --color-error: #FF0000;
  --color-warning: var(--yellow-500);
  --color-success: var(--green-500);
  --color-info: var(--blue-500);
  --color-svg: var(--color-text);
  --color-border: var(--color-layer);
}

/* Semantic Light mode colors */
body[data-theme=light] {
  --color-child-background: color-mix(in srgb, var(--color-background), var(--black-500) 11%);
  --color-background: var(--white-500);
  --color-text: var(--black-500);
  --color-layer-subtle: var(--black-0);
  --color-layer: var(--black-40);
  --color-layer-obvious: var(--black-80);
  --color-layer-heavy-100: var(--black-100);
  --color-layer-heavy-200: var(--black-200);
  --color-layer-heavy-300: var(--black-300);
  --color-layer-heavy-400: var(--black-400);
  --grey-500: #050607ff;
  --grey-400: #050607cc;
  --grey-300: #05060799;
  --grey-200: #05060766;
  --grey-100: #05060733;
  --grey-80: #0506072e;
  --grey-60: #05060729;
  --grey-40: #05060724;
  --grey-20: #0506071f;
  --grey-0: #0506071a;
  --solid-grey-500: #050607;
  --solid-grey-400: #353638;
  --solid-grey-300: #656768;
  --solid-grey-200: #949799;
  --solid-grey-100: #c4c8c9;
  --solid-grey-80: #c9ccce;
  --solid-grey-60: #ced1d3;
  --solid-grey-40: #d3d6d8;
  --solid-grey-20: #d7dbdd;
  --solid-grey-0: #dce0e2;
  --solid-red-500: #e91e63;
  --solid-red-400: #eb4a81;
  --solid-red-300: #ed759f;
  --solid-red-200: #f0a1be;
  --solid-red-100: #f2ccdc;
  --solid-green-500: #60C689;
  --solid-green-400: #7ed0a0;
  --solid-green-300: #9bdab6;
  --solid-green-200: #b9e4cd;
  --solid-green-100: #d6eee3;
  --solid-yellow-500: #e8c03f;
  --solid-yellow-400: #eacb64;
  --solid-yellow-300: #edd68a;
  --solid-yellow-200: #efe2af;
  --solid-yellow-100: #f2edd5;
  --solid-blue-500: #272AB0;
  --solid-blue-400: #5053bf;
  --solid-blue-300: #797cce;
  --solid-blue-200: #a2a6dc;
  --solid-blue-100: #cbcfeb;
  --solid-aqua-500: #57acdc;
  --solid-aqua-400: #76bbe2;
  --solid-aqua-300: #96cae8;
  --solid-aqua-200: #b5daee;
  --solid-aqua-100: #d5e9f4;
  --opacity-subtlest: 0.25;
  --opacity-subtle: 0.5;
  --opacity-obvious: 0.75;
}

/* Semantic Dark mode colors */
body[data-theme=dark] {
  --color-child-background: color-mix(in srgb, var(--color-background), var(--white-500) 11%);
  --color-background: var(--black-500);
  --color-text: var(--white-500);
  --color-layer-subtle: var(--white-0);
  --color-layer: var(--white-40);
  --color-layer-obvious: var(--white-80);
  --color-layer-heavy-100: var(--white-100);
  --color-layer-heavy-200: var(--white-200);
  --color-layer-heavy-300: var(--white-300);
  --color-layer-heavy-400: var(--white-400);
  --grey-500: #f4f8faff;
  --grey-400: #f4f8facc;
  --grey-300: #f4f8fa99;
  --grey-200: #f4f8fa66;
  --grey-100: #f4f8fa33;
  --grey-80: #f4f8fa1e;
  --grey-60: #f4f8fa19;
  --grey-40: #f4f8fa14;
  --grey-20: #f4f8fa0f;
  --grey-0: #f4f8fa0a;
  --solid-grey-500: #f4f8fa;
  --solid-grey-400: #c4c8c9;
  --solid-grey-300: #949799;
  --solid-grey-200: #656768;
  --solid-grey-100: #353638;
  --solid-grey-80: #303233;
  --solid-grey-60: #2b2d2e;
  --solid-grey-40: #262829;
  --solid-grey-20: #222324;
  --solid-grey-0: #1d1e1f;
  --solid-red-500: #e91e63;
  --solid-red-400: #bb1951;
  --solid-red-300: #8e143e;
  --solid-red-200: #60102c;
  --solid-red-100: #330b19;
  --solid-green-500: #60C689;
  --solid-green-400: #4ea06f;
  --solid-green-300: #3c7955;
  --solid-green-200: #29533b;
  --solid-green-100: #172c21;
  --solid-yellow-500: #e8c03f;
  --solid-yellow-400: #bb9b34;
  --solid-yellow-300: #8d7629;
  --solid-yellow-200: #60501d;
  --solid-yellow-100: #322b12;
  --solid-blue-500: #272AB0;
  --solid-blue-400: #20238e;
  --solid-blue-300: #191c6c;
  --solid-blue-200: #13144b;
  --solid-blue-100: #0c0d29;
  --solid-aqua-500: #57acdc;
  --solid-aqua-400: #478bb1;
  --solid-aqua-300: #366a87;
  --solid-aqua-200: #26485c;
  --solid-aqua-100: #152732;
  --opacity-subtlest: 0.125;
  --opacity-subtle: 0.25;
  --opacity-obvious: 0.50;
}