/**
* A utility, in the context of CUBE CSS, is a CSS class that does one job and does that one job well.
* This CSS class--more often than not—-will have only one CSS property defined, such as a background colour.
* It might also have a few CSS properties defined, in a concise group, like this example of a wrapper utility:
*
*    .wrapper {
*      margin-inline: auto;
*      padding-inline: 1rem;
*      max-width: 60rem;
*    }
*
* This handy utility provides a consistent max width, padded container that sits in the middle of the viewport when the viewport is greater than 60rem wide.
*
* One job: done well.
*/

.text-gradient {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline;
}

/* --- [TAILWIND] --- */
/* lift utility classes from tailwind on a need-to-use basis */

:root {
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --color-primary: #107C42;
  --color-primary-light: #33C480;
  --color-primary-dark: #185C37;

  --color-sky-50: oklch(0.977 0.013 236.62);
  --color-sky-100: oklch(0.951 0.026 236.824);
  --color-sky-200: oklch(0.901 0.058 230.902);
  --color-sky-300: oklch(0.828 0.111 230.318);
  --color-sky-400: oklch(0.746 0.16 232.661);
  --color-sky-500: oklch(0.685 0.169 237.323);
  --color-sky-600: oklch(0.588 0.158 241.966);
  --color-sky-700: oklch(0.5 0.134 242.749);
  --color-sky-800: oklch(0.443 0.11 240.79);
  --color-sky-900: oklch(0.391 0.09 240.876);
  --color-sky-950: oklch(0.293 0.066 243.157);

  --color-yellow-50: oklch(0.987 0.026 102.212);
  --color-yellow-100: oklch(0.973 0.071 103.193);
  --color-yellow-200: oklch(0.945 0.129 101.54);
  --color-yellow-300: oklch(0.905 0.182 98.111);
  --color-yellow-400: oklch(0.852 0.199 91.936);
  --color-yellow-500: oklch(0.795 0.184 86.047);
  --color-yellow-600: oklch(0.681 0.162 75.834);
  --color-yellow-700: oklch(0.554 0.135 66.442);
  --color-yellow-800: oklch(0.476 0.114 61.907);
  --color-yellow-900: oklch(0.421 0.095 57.708);
  --color-yellow-950: oklch(0.286 0.066 53.813);

  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);
  --color-neutral-950: oklch(0.145 0 0);

  --color-black: #000;
  --color-white: #fff;

  --spacing: 0.25rem;

  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.25rem;  /* 20px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  1.875rem; /* 30px */
  --text-4xl:  2.25rem;  /* 36px */
  --text-5xl:  3rem;     /* 48px */
  --text-6xl:  3.75rem;  /* 60px */
  --text-7xl:  4.5rem;   /* 72px */
  --text-8xl:  6rem;     /* 96px */
  --text-9xl:  8rem;     /* 128px */

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;

  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/*layout */
.aspect-16\/9 { aspect-ratio: 16 / 9 }
.inline       { display: inline }
.block        { display: block }
.flex         { display: flex }
.grid         { display: grid }
.contents     { display: contents }
.hidden       { display: none }

/* flexbox & grid */
.col-span-2      { grid-column: span 2 }
.col-span-3      { grid-column: span 3 }
.row-span-2      { grid-row: span 2 }
.row-span-3      { grid-row: span 3 }
.grid-cols-2     { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.gap-2           { gap: 0.5rem }
.gap-3           { gap: 0.75rem }
.gap-4           { gap: 1rem }
.gap-8           { gap: 2rem }
.gap-16          { gap: 4rem }
.justify-between { justify-content: space-between }
.justify-center  { justify-content: center }
.justify-end     { justify-content: flex-end }
.items-start     { align-items: flex-start }
.items-center    { align-items: center }
.flex-1          { flex: 1 }
.flex-wrap       { flex-wrap: wrap }
.flex-col        { flex-direction: column }

/* spacing */
.m-0               { margin:         0 }
.mt-0              { margin-top:     0 }
.p-0               { padding:        0 }
.py-1              { padding-block:  calc(var(--spacing) * 1) }
.mr-2              { margin-right:   calc(var(--spacing) * 2) }
.mt-2              { margin-top:     calc(var(--spacing) * 2) }
.px-3              { padding-inline: calc(var(--spacing) * 3) }
.space-y-3 > * + * { margin-top:     calc(var(--spacing) * 3) }
.mt-4              { margin-top:     calc(var(--spacing) * 4) }
.my-4              { margin-block:   calc(var(--spacing) * 4) }
.p-4               { padding:        calc(var(--spacing) * 4) }
.py-4              { padding-block:  calc(var(--spacing) * 4) }
.mb-6              { margin-bottom:  calc(var(--spacing) * 6) }
.mt-6              { margin-top:     calc(var(--spacing) * 6) }
.pb-8              { padding-bottom: calc(var(--spacing) * 8) }
.pb-20             { padding-bottom: calc(var(--spacing) * 20) }
.pt-8              { padding-top:    calc(var(--spacing) * 8) }
.pt-20             { padding-top:    calc(var(--spacing) * 20) }
.p-8               { padding:        calc(var(--spacing) * 8) }
.mb-8              { margin-bottom:  calc(var(--spacing) * 8) }
.mt-8              { margin-top:     calc(var(--spacing) * 8) }
.space-y-8 > * + * { margin-top:     calc(var(--spacing) * 8) }
.mb-12             { margin-bottom:  calc(var(--spacing) * 12) }
.mr-12             { margin-right:   calc(var(--spacing) * 12) }
.mt-12             { margin-top:     calc(var(--spacing) * 12) }
.mb-16             { margin-bottom:  calc(var(--spacing) * 16) }
.py-20             { padding-block:  calc(var(--spacing) * 20) }
.mt-20             { margin-top:     calc(var(--spacing) * 20) }
.mt-24             { margin-top:     calc(var(--spacing) * 24) }
.mx-auto           { margin-inline:  auto }

/* sizing */
.max-w-72  { max-width: 18rem } /* 288px */
.max-w-xl  { max-width: 36rem } /* 576px */

/* typography */
.text-xs   { font-size: var(--text-xs)   } /* 12px */
.text-sm   { font-size: var(--text-sm)   } /* 14px */
.text-base { font-size: var(--text-base) } /* 16px */
.text-lg   { font-size: var(--text-lg)   } /* 18px */
.text-xl   { font-size: var(--text-xl)   } /* 20px */
.text-2xl  { font-size: var(--text-2xl)  } /* 24px */
.text-3xl  { font-size: var(--text-3xl)  } /* 30px */
.text-4xl  { font-size: var(--text-4xl)  } /* 36px */
.text-5xl  { font-size: var(--text-5xl)  } /* 48px */
.text-6xl  { font-size: var(--text-6xl)  } /* 60px */
.font-medium { font-weight: var(--font-weight-medium) }
.font-bold   { font-weight: var(--font-weight-bold) }
.font-italic { font-style: italic }
.text-left   { text-align: left }
.text-center { text-align: center }
.text-right  { text-align: right }
.text-black    { color: black }
.text-primary  { color: var(--color-primary) }
.text-gray-600 { color: var(--color-neutral-600) }
.text-gray-900 { color: var(--color-neutral-900) }

/* backgrounds */
.bg-white      { background-color: var(--color-white) }
.bg-neutral-50 { background-color: var(--color-neutral-50) }

/* borders */
.rounded-lg      { border-radius: var(--radius-lg) }
.border          { border-width: 1px }
.border-t        { border-top-width:    1px }
.border-b        { border-bottom-width: 1px }
.border-gray-200 { border-color: var(--color-neutral-200) }

/* effects */
.shadow-md { box-shadow: var(--shadow-md) }
.shadow-2xl { box-shadow: var(--shadow-2xl) }