/* Global base styles for bnd-tgthr */

/* Variable fonts: Inter (display), Work Sans (body) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Work+Sans:wght@100..900&display=swap");

/* Theme variables – defined first so all rules can use them */
:root {
  --color-accent: #3b82f6;
  --color-accent-hover: #2563eb;

  /* Tailwind color ramps: pink, slate, cyan */
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --pink-950: #500724;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --cyan-950: #083344;

  /* Transparent white/black: use as rgb(var(--white) / 0.5) */
  --white: 255 255 255;
  --black: 0 0 0;

  /* Default button drop shadow: 2px 2px offset, no blur, slate-600 */
  --shadow-button-default: 2px 2px 0 var(--slate-600);

  /* FONTS */
  --font-display: "Inter", sans-serif;
  --font-body: "Work Sans", sans-serif;

  /* Size scale: major third (1.25), base = 1rem */
  --size-3xs: 0.4096rem;
  --size-2xs: 0.512rem;
  --size-xs: 0.64rem;
  --size-sm: 0.8rem;
  --size-base: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5625rem;
  --size-2xl: 1.953125rem;
  --size-3xl: 2.44140625rem;
  --size-4xl: 3.0515625rem;
  --size-5xl: 3.814697rem;
  --size-6xl: 4.768372rem;
  --size-7xl: 5.960464rem;
  --size-8xl: 7.450581rem;
  --size-9xl: 9.313226rem;
  --size-10xl: 11.641532rem;

  /* Em spacing scale */
  --em-0: 0;
  --em-1: 0.25em;
  --em-2: 0.5em;
  --em-3: 0.75em;
  --em-4: 1em;
  --em-5: 1.25em;
  --em-6: 1.5em;
  --em-8: 2em;
  --em-10: 2.5em;
  --em-12: 3em;
  --em-16: 4em;
  --em-20: 5em;
  --em-24: 6em;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html body {
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.4;
  color: var(--slate-50);
  background-color: black;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--font-display);
  line-height: normal;
  font-weight: 900;
}

/* html body prefix overrides Twind preflight (inherit, etc.). */
html body h1 {
  font-size: var(--size-4xl);
}
html body h2 {
  font-size: var(--size-3xl);
}
html body h3 {
  font-size: var(--size-2xl);
}
html body h4 {
  font-size: var(--size-xl);
}
html body h5 {
  font-size: var(--size-base);
}
html body h6 {
  font-size: var(--size-sm);
}
html body a {
  color: var(--pink-500);
}
/* html body button {
  padding: var(--em-2) var(--em-4);
  background-color: transparent;
  border: 1px solid var(--slate-300);
  font-size: var(--size-base);
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
  &:hover {
    border-color: white;
    box-shadow: 2px 2px 0px 0 var(--slate-600);
  }
} */
html body input {
  height: var(--em-10);
  padding: var(--em-1) var(--em-2);
  background-color: black;
  border: 1px solid var(--slate-300);
  font-size: var(--size-base);
  transition: border-color 0.2s ease-in-out;
  &:hover {
    border-color: white;
  }
  &::placeholder {
    color: var(--slate-500);
  }
}
html body label {
  font-size: var(--size-sm);
  font-weight: 600;
}
html body select {
  height: var(--em-10);
  padding: var(--em-1) var(--em-2);
  background-color: black;
  border: 1px solid var(--slate-300);
  font-size: var(--size-base);
  transition: border-color 0.2s ease-in-out;
  &:hover {
    border-color: white;
  }
}
/* html body form {} */

/* Theme variables */
:root {
  /* Tailwind color ramps: pink, slate, cyan */
  --pink-50: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;
  --pink-950: #500724;

  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --cyan-950: #083344;

  /* FONTS */
  --font-display: "Inter", sans-serif;
  --font-body: "Work Sans", sans-serif;

  /* Size scale: major third (1.25), base = 1rem (Tailwind naming) */
  --size-3xs: 0.4096rem;
  --size-2xs: 0.512rem;
  --size-xs: 0.64rem;
  --size-sm: 0.8rem;
  --size-base: 1rem;
  --size-lg: 1.25rem;
  --size-xl: 1.5625rem;
  --size-2xl: 1.953125rem;
  --size-3xl: 2.44140625rem;
  --size-4xl: 3.0515625rem;
  --size-5xl: 3.814697rem;
  --size-6xl: 4.768372rem;
  --size-7xl: 5.960464rem;
  --size-8xl: 7.450581rem;
  --size-9xl: 9.313226rem;
  --size-10xl: 11.641532rem;

  /* Em spacing scale (0.25em steps, em-* utilities use these) */
  --em-0: 0;
  --em-1: 0.25em;
  --em-2: 0.5em;
  --em-3: 0.75em;
  --em-4: 1em;
  --em-5: 1.25em;
  --em-6: 1.5em;
  --em-8: 2em;
  --em-10: 2.5em;
  --em-12: 3em;
  --em-16: 4em;
  --em-20: 5em;
  --em-24: 6em;
}

/* Em spacing utilities (em-* prefix to avoid Tailwind p-* / m-* conflict) */
.em-p-0 {
  padding: var(--em-0);
}
.em-p-1 {
  padding: var(--em-1);
}
.em-p-2 {
  padding: var(--em-2);
}
.em-p-3 {
  padding: var(--em-3);
}
.em-p-4 {
  padding: var(--em-4);
}
.em-p-5 {
  padding: var(--em-5);
}
.em-p-6 {
  padding: var(--em-6);
}
.em-p-8 {
  padding: var(--em-8);
}
.em-p-10 {
  padding: var(--em-10);
}
.em-p-12 {
  padding: var(--em-12);
}
.em-p-16 {
  padding: var(--em-16);
}
.em-p-20 {
  padding: var(--em-20);
}
.em-p-24 {
  padding: var(--em-24);
}

.em-px-0 {
  padding-left: var(--em-0);
  padding-right: var(--em-0);
}
.em-px-1 {
  padding-left: var(--em-1);
  padding-right: var(--em-1);
}
.em-px-2 {
  padding-left: var(--em-2);
  padding-right: var(--em-2);
}
.em-px-3 {
  padding-left: var(--em-3);
  padding-right: var(--em-3);
}
.em-px-4 {
  padding-left: var(--em-4);
  padding-right: var(--em-4);
}
.em-px-5 {
  padding-left: var(--em-5);
  padding-right: var(--em-5);
}
.em-px-6 {
  padding-left: var(--em-6);
  padding-right: var(--em-6);
}
.em-px-8 {
  padding-left: var(--em-8);
  padding-right: var(--em-8);
}
.em-px-10 {
  padding-left: var(--em-10);
  padding-right: var(--em-10);
}
.em-px-12 {
  padding-left: var(--em-12);
  padding-right: var(--em-12);
}
.em-px-16 {
  padding-left: var(--em-16);
  padding-right: var(--em-16);
}
.em-px-20 {
  padding-left: var(--em-20);
  padding-right: var(--em-20);
}
.em-px-24 {
  padding-left: var(--em-24);
  padding-right: var(--em-24);
}

.em-py-0 {
  padding-top: var(--em-0);
  padding-bottom: var(--em-0);
}
.em-py-1 {
  padding-top: var(--em-1);
  padding-bottom: var(--em-1);
}
.em-py-2 {
  padding-top: var(--em-2);
  padding-bottom: var(--em-2);
}
.em-py-3 {
  padding-top: var(--em-3);
  padding-bottom: var(--em-3);
}
.em-py-4 {
  padding-top: var(--em-4);
  padding-bottom: var(--em-4);
}
.em-py-5 {
  padding-top: var(--em-5);
  padding-bottom: var(--em-5);
}
.em-py-6 {
  padding-top: var(--em-6);
  padding-bottom: var(--em-6);
}
.em-py-8 {
  padding-top: var(--em-8);
  padding-bottom: var(--em-8);
}
.em-py-10 {
  padding-top: var(--em-10);
  padding-bottom: var(--em-10);
}
.em-py-12 {
  padding-top: var(--em-12);
  padding-bottom: var(--em-12);
}
.em-py-16 {
  padding-top: var(--em-16);
  padding-bottom: var(--em-16);
}
.em-py-20 {
  padding-top: var(--em-20);
  padding-bottom: var(--em-20);
}
.em-py-24 {
  padding-top: var(--em-24);
  padding-bottom: var(--em-24);
}

.em-m-0 {
  margin: var(--em-0);
}
.em-m-1 {
  margin: var(--em-1);
}
.em-m-2 {
  margin: var(--em-2);
}
.em-m-3 {
  margin: var(--em-3);
}
.em-m-4 {
  margin: var(--em-4);
}
.em-m-5 {
  margin: var(--em-5);
}
.em-m-6 {
  margin: var(--em-6);
}
.em-m-8 {
  margin: var(--em-8);
}
.em-m-10 {
  margin: var(--em-10);
}
.em-m-12 {
  margin: var(--em-12);
}
.em-m-16 {
  margin: var(--em-16);
}
.em-m-20 {
  margin: var(--em-20);
}
.em-m-24 {
  margin: var(--em-24);
}

.em-mx-0 {
  margin-left: var(--em-0);
  margin-right: var(--em-0);
}
.em-mx-1 {
  margin-left: var(--em-1);
  margin-right: var(--em-1);
}
.em-mx-2 {
  margin-left: var(--em-2);
  margin-right: var(--em-2);
}
.em-mx-3 {
  margin-left: var(--em-3);
  margin-right: var(--em-3);
}
.em-mx-4 {
  margin-left: var(--em-4);
  margin-right: var(--em-4);
}
.em-mx-5 {
  margin-left: var(--em-5);
  margin-right: var(--em-5);
}
.em-mx-6 {
  margin-left: var(--em-6);
  margin-right: var(--em-6);
}
.em-mx-8 {
  margin-left: var(--em-8);
  margin-right: var(--em-8);
}
.em-mx-10 {
  margin-left: var(--em-10);
  margin-right: var(--em-10);
}
.em-mx-12 {
  margin-left: var(--em-12);
  margin-right: var(--em-12);
}
.em-mx-16 {
  margin-left: var(--em-16);
  margin-right: var(--em-16);
}
.em-mx-20 {
  margin-left: var(--em-20);
  margin-right: var(--em-20);
}
.em-mx-24 {
  margin-left: var(--em-24);
  margin-right: var(--em-24);
}

.em-my-0 {
  margin-top: var(--em-0);
  margin-bottom: var(--em-0);
}
.em-my-1 {
  margin-top: var(--em-1);
  margin-bottom: var(--em-1);
}
.em-my-2 {
  margin-top: var(--em-2);
  margin-bottom: var(--em-2);
}
.em-my-3 {
  margin-top: var(--em-3);
  margin-bottom: var(--em-3);
}
.em-my-4 {
  margin-top: var(--em-4);
  margin-bottom: var(--em-4);
}
.em-my-5 {
  margin-top: var(--em-5);
  margin-bottom: var(--em-5);
}
.em-my-6 {
  margin-top: var(--em-6);
  margin-bottom: var(--em-6);
}
.em-my-8 {
  margin-top: var(--em-8);
  margin-bottom: var(--em-8);
}
.em-my-10 {
  margin-top: var(--em-10);
  margin-bottom: var(--em-10);
}
.em-my-12 {
  margin-top: var(--em-12);
  margin-bottom: var(--em-12);
}
.em-my-16 {
  margin-top: var(--em-16);
  margin-bottom: var(--em-16);
}
.em-my-20 {
  margin-top: var(--em-20);
  margin-bottom: var(--em-20);
}
.em-my-24 {
  margin-top: var(--em-24);
  margin-bottom: var(--em-24);
}

.em-gap-0 {
  gap: var(--em-0);
}
.em-gap-1 {
  gap: var(--em-1);
}
.em-gap-2 {
  gap: var(--em-2);
}
.em-gap-3 {
  gap: var(--em-3);
}
.em-gap-4 {
  gap: var(--em-4);
}
.em-gap-5 {
  gap: var(--em-5);
}
.em-gap-6 {
  gap: var(--em-6);
}
.em-gap-8 {
  gap: var(--em-8);
}
.em-gap-10 {
  gap: var(--em-10);
}
.em-gap-12 {
  gap: var(--em-12);
}
.em-gap-16 {
  gap: var(--em-16);
}
.em-gap-20 {
  gap: var(--em-20);
}
.em-gap-24 {
  gap: var(--em-24);
}

/* Type scale utilities – Tailwind naming (xs, sm, base, lg … 9xl), major-third scale; type-* prefix to avoid Tailwind text-* conflict */
.type-3xs {
  font-size: var(--size-3xs);
}
.type-2xs {
  font-size: var(--size-2xs);
}
.type-xs {
  font-size: var(--size-xs);
}
.type-sm {
  font-size: var(--size-sm);
}
.type-base {
  font-size: var(--size-base);
}
.type-lg {
  font-size: var(--size-lg);
}
.type-xl {
  font-size: var(--size-xl);
}
.type-2xl {
  font-size: var(--size-2xl);
}
.type-3xl {
  font-size: var(--size-3xl);
}
.type-4xl {
  font-size: var(--size-4xl);
}
.type-5xl {
  font-size: var(--size-5xl);
}
.type-6xl {
  font-size: var(--size-6xl);
}
.type-7xl {
  font-size: var(--size-7xl);
}
.type-8xl {
  font-size: var(--size-8xl);
}
.type-9xl {
  font-size: var(--size-9xl);
}
.type-10xl {
  font-size: var(--size-10xl);
}

/* Override Twind text-* only: use our major-third scale. Spacing (p-*, m-*, gap-*) stay Twind default (rem). */
html .text-3xs {
  font-size: var(--size-3xs);
}
html .text-2xs {
  font-size: var(--size-2xs);
}
html .text-xs {
  font-size: var(--size-xs);
}
html .text-sm {
  font-size: var(--size-sm);
}
html .text-base {
  font-size: var(--size-base);
}
html .text-lg {
  font-size: var(--size-lg);
}
html .text-xl {
  font-size: var(--size-xl);
}
html .text-2xl {
  font-size: var(--size-2xl);
}
html .text-3xl {
  font-size: var(--size-3xl);
}
html .text-4xl {
  font-size: var(--size-4xl);
}
html .text-5xl {
  font-size: var(--size-5xl);
}
html .text-6xl {
  font-size: var(--size-6xl);
}
html .text-7xl {
  font-size: var(--size-7xl);
}
html .text-8xl {
  font-size: var(--size-8xl);
}
html .text-9xl {
  font-size: var(--size-9xl);
}
html .text-10xl {
  font-size: var(--size-10xl);
}