/* ---------------------------------------------
Color tokens
------------------------------------------------ */
:root {
  --black: #000000;
  --gray-9: #17161a;
  --gray-8: #2f2c35;
  --gray-7: #46434f;
  --gray-6: #5e596a;
  --gray-5: #756f84;
  --gray-4: #a29dae;
  --gray-3: #d7d5df;
  --gray-2: #efedf5;
  --gray-1: #fbfafd;
  --white: #ffffff;

  --blue-9: #001833;
  --blue-8: #002966;
  --blue-7: #023aa7;
  --blue-6: #0045f6;
  --blue-5: #007aff;
  --blue-4: #3395ff;
  --blue-3: #66afff;
  --blue-2: #99caff;
  --blue-1: #e5f1ff;
  --blue-core: var(--blue-5);

  --mint-9: #051d18;
  --mint-8: #0a3b30;
  --mint-7: #0f5949;
  --mint-6: #147761;
  --mint-5: #19957a;
  --mint-4: #1eb392;
  --mint-3: #23d1ab;
  --mint-2: #6ce0c7;
  --mint-1: #daf7f1;
  --mint-core: var(--mint-3);

  --green-9: #061c0a;
  --green-8: #0b3913;
  --green-7: #11551d;
  --green-6: #177226;
  --green-5: #1c8e30;
  --green-4: #22aa39;
  --green-3: #27c743;
  --green-2: #2de34c;
  --green-1: #cbf8d3;
  --green-core: var(--green-2);

  --yellow-9: #201800;
  --yellow-8: #403100;
  --yellow-7: #604900;
  --yellow-6: #806200;
  --yellow-5: #9f7a00;
  --yellow-4: #bf9200;
  --yellow-3: #dfab00;
  --yellow-2: #ffc300;
  --yellow-1: #fff0bf;
  --yellow-core: var(--yellow-2);

  --orange-9: #2b0f00;
  --orange-8: #551f00;
  --orange-7: #802e00;
  --orange-6: #aa3d00;
  --orange-5: #d54d00;
  --orange-4: #ff5c00;
  --orange-3: #ff8540;
  --orange-2: #ffae80;
  --orange-1: #ffebdf;
  --orange-core: var(--orange-4);

  --red-9: #2b080e;
  --red-8: #550f1c;
  --red-7: #80172b;
  --red-6: #aa1e39;
  --red-5: #d52647;
  --red-4: #ff2d55;
  --red-3: #ff6280;
  --red-2: #ff96aa;
  --red-1: #ffe5ea;
  --red-core: var(--red-4);

  --pink-9: #2b001a;
  --pink-8: #550033;
  --pink-7: #80004d;
  --pink-6: #aa0066;
  --pink-5: #d50080;
  --pink-4: #ff0099;
  --pink-3: #ff40b3;
  --pink-2: #ff80cc;
  --pink-1: #ffe3f4;
  --pink-core: var(--pink-4);

  --purple-9: #16093a;
  --purple-8: #2c1275;
  --purple-7: #411baf;
  --purple-6: #5724e9;
  --purple-5: #7349ed;
  --purple-4: #8f6df0;
  --purple-3: #ab92f4;
  --purple-2: #c7b6f8;
  --purple-1: #f0ebff;
  --purple-core: var(--purple-6);
}
/* -------------------------------------------------------
Spacing
------------------------------------------------------- */
:root {
  --spacing-1: 6px;
  --spacing-2: calc(var(--spacing-1) * 2);
  --spacing-3: calc(var(--spacing-1) * 3);
  --spacing-4: calc(var(--spacing-1) * 4);
  --spacing-5: calc(var(--spacing-1) * 5);
  --spacing-6: calc(var(--spacing-1) * 6);
  --spacing-7: calc(var(--spacing-1) * 7);
  --spacing-8: calc(var(--spacing-1) * 8);
  --spacing-9: calc(var(--spacing-1) * 9);
  --spacing-10: calc(var(--spacing-1) * 10);
}
/* -------------------------------------------------------
Color
------------------------------------------------------- */
:root,
[data-theme='light'] {
  /* Base */
  --main-bkg-color: var(--gray-1);
  --modal-bkg-color: var(--white);
  --modal-backdrop-opacity: 50%; /* Must be a percent to work with framer motion */
  --surface-bkg-color: var(--white);
  --border-color: var(--gray-5);
  --border-color-dim: var(--gray-3);
  --border-color-extra-dim: var(--gray-2);

  --error-color: var(--red-core);
  --text-color: var(--black);
  --text-color-dim: var(--gray-7);
  --text-color-inverse: var(--white);
  --text-color-inverse-dim: var(--gray-3);
  --link-color: var(--blue-6);
  --link-color-hover: var(--blue-4);
  --link-color-active: var(--blue-2);
  --highlight-color: var(--blue-6);

  /* Buttons */
  --btn-color: var(--gray-9);
  --btn-text-color: var(--white);
  --btn-color-hover: var(--gray-7);
  --btn-color-active: var(--gray-6);
  --btn-color-focus: var(--gray-2);

  /* Dropdowns */
  --dropdown-bkg-hover-color: var(--gray-2);
  --dropdown-bkg-active-color: var(--gray-3);

  /* Banners */
  --banner-default-bkg-color: #dbeafe;
  --banner-default-border-color: #2563eb;
  --banner-default-icon-color: #2563eb;
  --banner-default-text-color: #1e3a8a;
  --banner-guidance-bkg-color: #dbeafe;
  --banner-guidance-border-color: #2563eb;
  --banner-guidance-icon-color: #2563eb;
  --banner-guidance-text-color: #1e3a8a;
  --banner-success-bkg-color: #d1fae5;
  --banner-success-border-color: #059669;
  --banner-success-icon-color: #059669;
  --banner-success-text-color: #064e3b;
  --banner-warning-bkg-color: #fef3c7;
  --banner-warning-border-color: #973c00;
  --banner-warning-icon-color: #973c00;
  --banner-warning-text-color: #78350f;
  --banner-critical-bkg-color: #fee2e2;
  --banner-critical-border-color: #dc2626;
  --banner-critical-icon-color: #dc2626;
  --banner-critical-text-color: #7f1d1d;
  --banner-border-radius: 0;
  --banner-padding: 16px;
  --banner-border-width: 0;
  --banner-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --banner-content-max-width: 1024px;
  --banner-copy-max-width: 100%;
  --banner-layout-gap: 12px;
  --banner-heading-font-size: 0.875rem;
  --banner-body-font-size: 0.875rem;
}
[data-theme='dark'] {
  /* Base */
  --main-bkg-color: var(--gray-9);
  --modal-bkg-color: var(--gray-8);
  --modal-backdrop-opacity: 60%; /* Must be a percent to work with framer motion */
  --surface-bkg-color: var(--gray-8);
  --border-color: var(--gray-5);
  --border-color-dim: var(--gray-7);
  --border-color-extra-dim: var(--gray-8);
  --error-color: var(--red-core);
  --text-color: var(--white);
  --text-color-dim: var(--gray-3);
  --text-color-inverse: var(--black);
  --text-color-inverse-dim: var(--gray-7);
  --link-color: var(--blue-3);
  --link-color-hover: var(--blue-5);
  --link-color-active: var(--blue-7);
  --highlight-color: var(--blue-3);

  /* Buttons */
  --btn-color: var(--gray-1);
  --btn-text-color: var(--black);
  --btn-color-hover: var(--gray-3);
  --btn-color-active: var(--gray-4);
  --btn-color-focus: var(--gray-8);

  /* Dropdowns */
  --dropdown-bkg-hover-color: var(--gray-7);
  --dropdown-bkg-active-color: var(--gray-6);

  /* Banners */
  --banner-default-bkg-color: #dbeafe;
  --banner-default-border-color: #2563eb;
  --banner-default-icon-color: #2563eb;
  --banner-default-text-color: #1e3a8a;
  --banner-guidance-bkg-color: #dbeafe;
  --banner-guidance-border-color: #2563eb;
  --banner-guidance-icon-color: #2563eb;
  --banner-guidance-text-color: #1e3a8a;
  --banner-success-bkg-color: #d1fae5;
  --banner-success-border-color: #059669;
  --banner-success-icon-color: #059669;
  --banner-success-text-color: #064e3b;
  --banner-warning-bkg-color: #fef3c7;
  --banner-warning-border-color: #973c00;
  --banner-warning-icon-color: #973c00;
  --banner-warning-text-color: #78350f;
  --banner-critical-bkg-color: #fee2e2;
  --banner-critical-border-color: #dc2626;
  --banner-critical-icon-color: #dc2626;
  --banner-critical-text-color: #7f1d1d;
  --banner-border-radius: 0;
  --banner-padding: 16px;
  --banner-border-width: 0;
  --banner-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  --banner-content-max-width: 1024px;
  --banner-copy-max-width: 100%;
  --banner-layout-gap: 12px;
  --banner-heading-font-size: 0.875rem;
  --banner-body-font-size: 0.875rem;
}
/* -------------------------------------------------------
Typography
------------------------------------------------------- */
:root {
  /* Font-family - try to use component first */
  --heading-typeface: Inter, sans-serif;
  --body-text-typeface: Inter, sans-serif;
  --eyebrow-text-typeface: Inter, sans-serif;
  --mono-typeface: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
    'Courier New', monospace;

  /* Font-weight - try to use font shorthand vars first */
  --heading-font-weight: 700;
  --body-text-normal-font-weight: 400;
  --body-text-bold-font-weight: 650;
  --eyebrow-text-font-weight: 650;

  --extra-bold-font-weight: 800;
  --normal-font-weight: 400;

  /* Font-size - try to use font shorthand vars first */
  --heading-font-size-large: 2.0625rem; /* 33px */
  --heading-font-size-medium: 1.6875rem; /* 27px */
  --heading-font-size-small: 1.4375rem; /* 23px */
  --heading-font-size-x-small: 1.1875rem; /* 19px */
  --heading-font-size-xx-small: var(--body-text-font-size-medium); /* 16px */

  --body-text-font-size-large: 1.1875rem; /* 19px */
  --body-text-font-size-medium: 1rem; /* 16px */
  --body-text-font-size-small: 0.875rem; /* 14px */
  --body-text-font-size-x-small: 0.75rem; /* 12px */
  --body-text-font-size-xx-small: 0.625rem; /* 10px */

  --eyebrow-text-font-size: 0.75rem; /* 12px */

  /* Line-height - try to use font shorthand vars first */
  --heading-line-height-large: 2.5rem; /* 40px */
  --heading-line-height-medium: 2.0625rem; /* 33px */
  --heading-line-height-small: 1.75rem; /* 28px */
  --heading-line-height-x-small: 1.4375rem; /* 23px */
  --heading-line-height-xx-small: 1.1875rem; /* 19px */

  --body-text-line-height-large: 1.8125rem; /* 29px */
  --body-text-line-height-medium: 1.5rem; /* 24px */
  --body-text-line-height-small: var(--body-text-line-height-medium); /* 24px */
  --body-text-line-height-x-small: 1.125rem; /* 18px */

  --eyebrow-text-line-height: 1.125rem; /* 18px */

  /* Letter-spacing - try to use font shorthand vars first */
  --heading-letter-spacing-large: -0.015em;
  --heading-letter-spacing-medium: -0.015em;
  --heading-letter-spacing-small: -0.01em;
  --heading-letter-spacing-x-small: -0.01em;
  --heading-letter-spacing-xx-small: 0;

  --body-text-letter-spacing: 0;

  --eyebrow-text-letter-spacing: 0.022em;

  /*
    Font shorthands - try to use type components first because headings need
    letter-spacing styling, which using the component automatically gives you.
    If you can't use the component, remember to use an appropriate
    letter-spacing variable.
  */
  --heading-large: var(--extra-bold-font-weight) var(--heading-font-size-large) /
    var(--heading-line-height-large) var(--heading-typeface);
  --heading-medium: var(--heading-font-weight) var(--heading-font-size-medium) /
    var(--heading-line-height-medium) var(--heading-typeface);
  --heading-small: var(--heading-font-weight) var(--heading-font-size-small) /
    var(--heading-line-height-small) var(--heading-typeface);
  --heading-x-small: var(--heading-font-weight) var(--heading-font-size-x-small) /
    var(--heading-line-height-x-small) var(--heading-typeface);
  --heading-xx-small: var(--heading-font-weight)
    var(--heading-font-size-xx-small) / var(--heading-line-height-xx-small)
    var(--heading-typeface);

  --body-text-large: var(--body-text-normal-font-weight)
    var(--body-text-font-size-large) / var(--body-text-line-height-large)
    var(--body-text-typeface);
  --body-text-medium: var(--body-text-normal-font-weight)
    var(--body-text-font-size-medium) / var(--body-text-line-height-medium)
    var(--body-text-typeface);
  --body-text-small: var(--body-text-normal-font-weight)
    var(--body-text-font-size-small) / var(--body-text-line-height-small)
    var(--body-text-typeface);
  --body-text-x-small: var(--body-text-normal-font-weight)
    var(--body-text-font-size-x-small) / var(--body-text-line-height-x-small)
    var(--body-text-typeface);

  --eyebrow-text: var(--eyebrow-text-font-weight) var(--eyebrow-text-font-size) /
    var(--eyebrow-text-line-height) var(--eyebrow-text-typeface);
}
/* -------------------------------------------------------
Box-shadow
------------------------------------------------------- */
:root,
[data-theme='light'] {
  --box-shadow-small: 1px 3px 9px -3px hsla(0, 0%, 0%, 6%),
    -3px -4px 6px -6px hsla(0, 0%, 0%, 6%);
  --box-shadow-medium: 2px 6px 12px -3px hsla(0, 0%, 0%, 8%),
    -3px -4px 6px -6px hsla(0, 0%, 0%, 6%);
  --box-shadow-large: 3px 12px 18px -6px hsla(0, 0%, 0%, 9%),
    -3px -4px 6px -6px hsla(0, 0%, 0%, 6%);
  --box-shadow-dropdown: var(--box-shadow-small);
}
[data-theme='dark'] {
  --box-shadow-small: 1px 12px 18px -6px hsla(256, 100%, 9%, 72%),
    -3px -4px 6px -6px hsla(256, 100%, 9%, 72%);
  --box-shadow-medium: 2px 18px 24px -6px hsla(256, 100%, 9%, 78%),
    -3px -4px 6px -6px hsla(256, 100%, 9%, 72%);
  --box-shadow-large: 3px 24px 40px -12px hsla(256, 100%, 9%, 84%),
    -3px -4px 6px -6px hsla(256, 100%, 9%, 72%);
}
/* -------------------------------------------------------
Border-radii
------------------------------------------------------- */
:root {
  --border-radius-x-small: 3px; /* only for making items slightly off-square */
  --border-radius-small: 6px; /* innermost, smallest element corners */
  --border-radius-medium: 12px; /* mid-size and container element corners */
  --border-radius-large: 24px; /* outermost, largest element corners */
  --border-radius-round: 999px; /* fully rounds an elements like buttons */
}
/* -------------------------------------------------------
Transition
------------------------------------------------------- */
:root {
  --hover-transition: 200ms;
  --transition-easing: cubic-bezier(0.4, 0.05, 0.33, 0.95);
}