/**
 * CSS reset.
 * Scoped to .color-punch-root so the framework does not affect the rest of the page.
 * Put class="color-punch-root" on html for full-page use, or on a wrapper div for embedded use.
 */

.color-punch-root {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;

  & body {
    margin: 0;
  }

  & *,
  & *::before,
  & *::after {
    box-sizing: inherit;
  }

  /* Exclude .accordion so component list styles (e.g. margin-bottom) are not overridden */
  & ul:not(.accordion),
  & ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & img,
  & picture,
  & video,
  & canvas,
  & svg {
    display: block;
    max-width: 100%;
  }

  /* Do not set font: inherit on form elements here: it would override component
     classes like .btn (specificity .color-punch-root button > .btn). Components set
     their own font; other elements inherit from .color-punch-root. */

  & ::selection {
    background: var(--color-primary);
    color: var(--white);
  }

  & ::-moz-selection {
    background: var(--color-primary);
    color: var(--white);
  }
}

/**
 * Font faces and font-family tokens.
 * Body: Outfit; Display/headings: Rubik; Code: Fira Code.
 */

/* Outfit – body (local TTF for smooth rendering; weights 400, 500, 700, 900) */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Outfit/static/Outfit-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Outfit/static/Outfit-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Outfit/static/Outfit-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Outfit/static/Outfit-Black.ttf") format("truetype");
}

/* Fira Code – code (local) */
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Fira_Code/static/FiraCode-Regular.ttf") format("truetype");
}

/* Rubik – display font (headings); weights 400, 700, 900 */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Rubik/static/Rubik-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Rubik/static/Rubik-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Rubik/static/Rubik-Black.ttf") format("truetype");
}

/* Font stack variables: scoped to .color-punch-root so they only apply inside the namespace */
.color-punch-root {
  --font-display: Rubik, ui-sans-serif, system-ui, sans-serif;
  --font-display-weight: 700;
  --font-body: Outfit, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, monospace;
}

/**
 * Theme colors. Scoped to .color-punch-root.
 * Light default; dark via .dark or [data-theme="dark"] on the namespace.
 */

.color-punch-root {
  /* Palette */
  --coal: #0f0d0e;
  --charcoal: #231f20;
  --charcoal-muted: #1b1918;
  --gray: #262522;
  --yellow: #fcba2a;
  --pink: #f38ba1;
  --green: #0ba959;
  --purple: #7b5fa7;
  --beige: #faf4db;
  --blue: #12b6e5;
  --orange: #fc7528;
  --red: #ed213d;
  --white: #fff;

  /* Extended palette */
  --teal: #0d9488;
  --coral: #e85d4c;
  --amber: #e5a317;
  --fuchsia: #c026d3;
  --mint: #34d399;
  --sky: #0ea5e9;

  /* Catppuccin-aligned (harmonized with palette above) */
  --rosewater: #e08c7c;
  --flamingo: #e8929e;
  --maroon: #b51e32;
  --sapphire: #1a9fad;
  --lavender: #9a8bce;

  /* Aliases (same color, alternate name) */
  --black: var(--coal);
  --gold: var(--yellow);
  --aqua: var(--blue);

  /* Gray scale */
  --gray-25: #f7f6f7;
  --gray-50: #f2f3f5;
  --gray-75: #e8eaec;
  --gray-100: #e0e2e4;
  --gray-200: #b0b4b9;
  --gray-300: #777980;
  --gray-400: #5d6069;
  --gray-500: #393c44;
  --gray-600: #1d2025;
  --gray-700: #131519;
  --gray-800: #0c0e10;
  --gray-900: #000;

  /* Surface / text defaults */
  --color-bg: var(--gray-25);
  --color-text: var(--charcoal);
  --color-muted: #817074;
  --color-primary: var(--pink);
  --color-secondary: var(--blue);

  /* Beige on light: use dark tan so it's visible on light backgrounds (tabs, etc.) */
  --beige-on-light: #6b5344;
}

/* Global or namespaced: theme on html or on .color-punch-root wrapper */
.dark,
html[data-theme="dark"],
.color-punch-root.dark,
.color-punch-root[data-theme="dark"] {
  --color-bg: var(--coal);
  --color-text: var(--beige);
  --color-muted: #9fa098;
  --beige-on-light: var(--beige);
}

/**
 * Typography scale and font-family usage.
 * All styles scoped to .color-punch-root. Put class="color-punch-root" on html or a wrapper div.
 * Depends on: fonts.css, colors.css.
 * rem is always relative to html. When the namespace is on a div, html has no font-size from us,
 * so rem would be smaller. We set html's font-size whenever .color-punch-root exists so both
 * full-page and namespaced demos use the same rem scale.
 */
:root {
  --root-font-size: 120%;
}

html:has(.color-punch-root) {
  font-size: var(--root-font-size);
}

.color-punch-root {
  /* Typography scale (rem-based; --root-font-size inherited from :root) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  font-size: var(--root-font-size);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);

  & h1 {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    line-height: var(--leading-snug);
  }

  & h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 1.5rem 0 0.5rem;
  }

  & h3 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 1.5rem 0 0.5rem;
  }

  & h4 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 1.25rem 0 0.5rem;
  }

  & h5 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 1rem 0 0.25rem;
  }

  & h6 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 0.75rem 0 0.25rem;
  }

  & p {
    margin: 0 0 1rem;
    font-size: var(--text-base);
  }

  & code {
    font-family: var(--font-mono);
    background: var(--gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
  }

  & b,
  & strong {
    font-weight: var(--font-bold);
  }

  & strong.accent {
    color: var(--color-primary);
  }

  & em {
    font-style: italic;
  }

  /* All <i> normal so icon fonts (e.g. Font Awesome) are not italicized */
  & i {
    font-style: normal;
  }

  & i.emphasis {
    font-style: italic;
    color: var(--color-primary);
    font-weight: var(--font-black);
  }

  & .section-label {
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
  }

  & .font-note {
    margin-bottom: 1rem;
  }

  & .sources-note {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: 1.5rem;
  }

  & .palette-label {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: 0.25rem;
  }

  & .font-display {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
  }

  & .font-body {
    font-family: var(--font-body);
  }

  & .font-mono {
    font-family: var(--font-mono);
  }
}

/**
 * Layout: container, flex, grid, spacing.
 * Variables scoped to .color-punch-root.
 */

.color-punch-root {
  /* Spacing scale (Tailwind-style: 1 = 0.25rem) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-max: 1280px;
  --container-padding: var(--space-6);

  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;

  --shadow-button: 0px 3px 0px 1px var(--charcoal);
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* ---- Flex ---- */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-grow {
  flex-grow: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

/* Justify */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

/* Align */
.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

/* Margin auto */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

/* ---- Grid ---- */
.grid {
  display: grid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3×3 / 4×4: responsive via explicit grid-template-columns per breakpoint (see :root --breakpoint-*) */
.grid-cols-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.col-span-1 {
  grid-column: span 1 / span 1;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-6 {
  grid-column: span 6 / span 6;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

.col-span-9 {
  grid-column: span 9 / span 9;
}

.col-span-10 {
  grid-column: span 10 / span 10;
}

.col-span-11 {
  grid-column: span 11 / span 11;
}

.col-span-12 {
  grid-column: span 12 / span 12;
}


.place-items-center {
  place-items: center;
}

.justify-items-center {
  justify-items: center;
}

/* ---- Gap ---- */
.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

.gap-10 {
  gap: var(--space-10);
}

.gap-12 {
  gap: var(--space-12);
}

.gap-16 {
  gap: var(--space-16);
}

.gap-20 {
  gap: var(--space-20);
}

.gap-24 {
  gap: var(--space-24);
}

/* Row / column gap */
.gap-y-1 {
  row-gap: var(--space-1);
}

.gap-y-2 {
  row-gap: var(--space-2);
}

.gap-y-4 {
  row-gap: var(--space-4);
}

.gap-y-6 {
  row-gap: var(--space-6);
}

.gap-x-1 {
  column-gap: var(--space-1);
}

.gap-x-2 {
  column-gap: var(--space-2);
}

.gap-x-4 {
  column-gap: var(--space-4);
}

/* ---- Width ---- */
.w-full {
  width: 100%;
}

/* Width fractions (12-column grid) */
.w-1\/12 {
  width: 8.333333%;
}

.w-2\/12 {
  width: 16.666667%;
}

.w-3\/12 {
  width: 25%;
}

.w-4\/12 {
  width: 33.333333%;
}

.w-5\/12 {
  width: 41.666667%;
}

.w-6\/12 {
  width: 50%;
}

.w-7\/12 {
  width: 58.333333%;
}

.w-8\/12 {
  width: 66.666667%;
}

.w-9\/12 {
  width: 75%;
}

.w-10\/12 {
  width: 83.333333%;
}

.w-11\/12 {
  width: 91.666667%;
}

.w-12\/12 {
  width: 100%;
}

/* Width fractions (halves, thirds, quarters, etc.) */
.w-1\/2 {
  width: 50%;
}

.w-1\/3 {
  width: 33.333333%;
}

.w-2\/3 {
  width: 66.666667%;
}

.w-1\/4 {
  width: 25%;
}

.w-2\/4 {
  width: 50%;
}

.w-3\/4 {
  width: 75%;
}

.w-1\/5 {
  width: 20%;
}

.w-2\/5 {
  width: 40%;
}

.w-3\/5 {
  width: 60%;
}

.w-4\/5 {
  width: 80%;
}

.w-1\/6 {
  width: 16.666667%;
}

.w-2\/6 {
  width: 33.333333%;
}

.w-3\/6 {
  width: 50%;
}

.w-4\/6 {
  width: 66.666667%;
}

.w-5\/6 {
  width: 83.333333%;
}

/* Max-width */
.max-w-sm {
  max-width: 24rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

/* ---- Padding ---- */
.p-2 {
  padding: var(--space-2);
}

.p-4 {
  padding: var(--space-4);
}

.p-6 {
  padding: var(--space-6);
}

.p-8 {
  padding: var(--space-8);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

/* ---- Margin (common) ---- */
.m-0 {
  margin: 0;
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mt-12 {
  margin-top: var(--space-12);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.mb-10 {
  margin-bottom: var(--space-10);
}

/* ---- Responsive: use :root --breakpoint-sm (40rem), --breakpoint-md (48rem); keep in sync ---- */
@media (min-width: 40rem) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-1\/3 {
    width: 33.333333%;
  }

  .md\:w-2\/3 {
    width: 66.666667%;
  }

  .md\:w-1\/4 {
    width: 25%;
  }

  .md\:w-3\/4 {
    width: 75%;
  }

  .md\:w-6\/12 {
    width: 50%;
  }

  .md\:w-4\/12 {
    width: 33.333333%;
  }

  .md\:w-8\/12 {
    width: 66.666667%;
  }

  .md\:w-full {
    width: 100%;
  }
}

/* ---- Background colors (palette + gray scale) ---- */
.bg-coal {
  background-color: var(--coal);
}

.bg-charcoal {
  background-color: var(--charcoal);
}

.bg-charcoal-muted {
  background-color: var(--charcoal-muted);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-pink {
  background-color: var(--pink);
}

.bg-green {
  background-color: var(--green);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-beige {
  background-color: var(--beige);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-red {
  background-color: var(--red);
}

.bg-white {
  background-color: var(--white);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-coral {
  background-color: var(--coral);
}

.bg-amber {
  background-color: var(--amber);
}

.bg-fuchsia {
  background-color: var(--fuchsia);
}

.bg-mint {
  background-color: var(--mint);
}

.bg-sky {
  background-color: var(--sky);
}

.bg-rosewater {
  background-color: var(--rosewater);
}

.bg-flamingo {
  background-color: var(--flamingo);
}

.bg-maroon {
  background-color: var(--maroon);
}

.bg-sapphire {
  background-color: var(--sapphire);
}

.bg-lavender {
  background-color: var(--lavender);
}

.bg-gray-25 {
  background-color: var(--gray-25);
}

.bg-gray-50 {
  background-color: var(--gray-50);
}

.bg-gray-75 {
  background-color: var(--gray-75);
}

.bg-gray-100 {
  background-color: var(--gray-100);
}

.bg-gray-200 {
  background-color: var(--gray-200);
}

.bg-gray-300 {
  background-color: var(--gray-300);
}

.bg-gray-400 {
  background-color: var(--gray-400);
}

.bg-gray-500 {
  background-color: var(--gray-500);
}

.bg-gray-600 {
  background-color: var(--gray-600);
}

.bg-gray-700 {
  background-color: var(--gray-700);
}

.bg-gray-800 {
  background-color: var(--gray-800);
}

.bg-gray-900 {
  background-color: var(--gray-900);
}

/* ---- Text colors (palette + gray scale) ---- */
.text-coal {
  color: var(--coal);
}

.text-charcoal {
  color: var(--charcoal);
}

.text-charcoal-muted {
  color: var(--charcoal-muted);
}

.text-gray {
  color: var(--gray);
}

.text-yellow {
  color: var(--yellow);
}

.text-pink {
  color: var(--pink);
}

.text-green {
  color: var(--green);
}

.text-purple {
  color: var(--purple);
}

.text-beige {
  color: var(--beige);
}

.text-blue {
  color: var(--blue);
}

.text-orange {
  color: var(--orange);
}

.text-red {
  color: var(--red);
}

.text-white {
  color: var(--white);
}

.text-primary {
  color: var(--color-primary);
}

.text-secondary {
  color: var(--color-secondary);
}

.text-teal {
  color: var(--teal);
}

.text-coral {
  color: var(--coral);
}

.text-amber {
  color: var(--amber);
}

.text-fuchsia {
  color: var(--fuchsia);
}

.text-mint {
  color: var(--mint);
}

.text-sky {
  color: var(--sky);
}

.text-rosewater {
  color: var(--rosewater);
}

.text-flamingo {
  color: var(--flamingo);
}

.text-maroon {
  color: var(--maroon);
}

.text-sapphire {
  color: var(--sapphire);
}

.text-lavender {
  color: var(--lavender);
}

.text-gray-25 {
  color: var(--gray-25);
}

.text-gray-50 {
  color: var(--gray-50);
}

.text-gray-75 {
  color: var(--gray-75);
}

.text-gray-100 {
  color: var(--gray-100);
}

.text-gray-200 {
  color: var(--gray-200);
}

.text-gray-300 {
  color: var(--gray-300);
}

.text-gray-400 {
  color: var(--gray-400);
}

.text-gray-500 {
  color: var(--gray-500);
}

.text-gray-600 {
  color: var(--gray-600);
}

.text-gray-700 {
  color: var(--gray-700);
}

.text-gray-800 {
  color: var(--gray-800);
}

.text-gray-900 {
  color: var(--gray-900);
}

/**
 * Accordion component.
 * Native <details> + <summary>; open state and hover use theme colors.
 */

.accordion {
  list-style: none;
  margin: 0;
  margin-bottom: var(--space-6);
  padding: 0;

  .accordion__item {
    display: block;
    border-bottom: 3px solid var(--charcoal);
    font-weight: var(--font-medium);

    &:last-child {
      border-bottom-width: 0;
    }
  }

  .accordion__details {
    position: relative;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-size: var(--text-xl);

    &[open] .accordion__summary {
      background: var(--color-primary);
      color: var(--white);
    }

    &[open] .accordion__icon {
      transform: rotate(45deg);
    }
  }

  .accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-2);
    padding: var(--space-4) var(--space-6);
    list-style: none;
    background: var(--gray-25);
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      background: var(--color-primary);
      color: var(--white);
    }
  }

  .accordion__label {
    flex: 1;
    min-width: 0;

    &:empty {
      display: none;
    }
  }

  .accordion__icon {
    flex-shrink: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 1.25em;
    line-height: 15px;
    vertical-align: middle;
    transform-origin: center;
    transition: transform 0.2s ease;
  }

  .accordion__panel {
    padding: var(--space-6) var(--space-8);
    font-size: var(--text-base);
    background: var(--gray-25);
    color: var(--color-text);
  }
}

/**
 * Button component.
 * Default: primary fill, pill shape, shadow (login/nav style). Secondary: blue outline.
 * Hover: raise 1px, stronger shadow. Active: press down, smaller shadow.
 */

.btn {
  --btn-focus-color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 900;
  line-height: var(--leading-normal);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  border-radius: 100px;
  border: 3px solid var(--color-primary);
  cursor: pointer;
  background: var(--color-primary);
  color: var(--white);
  box-shadow: 0 6px 0 0px var(--charcoal);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

  &:hover:not(:disabled) {
    transform: translateY(-4px);
    box-shadow: 0 10px 2px -2px var(--charcoal);
  }

  &:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0px 0 0px var(--charcoal);
  }

  &:focus-visible {
    outline: 4px solid var(--btn-focus-color);
    outline-offset: -1px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &.btn--no-disabled-fade:disabled {
    opacity: 1;
  }

  &.btn--primary {
    background: var(--color-primary);
    color: var(--white);
    border-color: var(--color-primary);
  }

  &.btn--secondary {
    --btn-focus-color: var(--color-secondary);
    background: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);

    &:hover:not(:disabled) {
      background: var(--color-secondary);
      color: var(--white);
      opacity: 1;
    }
  }

  &.btn--outline {
    --btn-outline-color: var(--color-secondary);
    --btn-focus-color: var(--btn-outline-color);
    background: transparent;
    color: var(--btn-outline-color);
    border-color: var(--btn-outline-color);

    &:hover:not(:disabled) {
      background: var(--btn-outline-color);
      color: var(--white);
    }

    &:active:not(:disabled) {
      background: var(--btn-outline-color);
      color: var(--white);
    }

    &.text-primary {
      --btn-outline-color: var(--color-primary);
      --btn-focus-color: var(--color-primary);
    }

    &.text-secondary {
      --btn-outline-color: var(--color-secondary);
      --btn-focus-color: var(--color-secondary);
    }

    &.text-pink {
      --btn-outline-color: var(--pink);
      --btn-focus-color: var(--pink);
    }

    &.text-green {
      --btn-outline-color: var(--green);
      --btn-focus-color: var(--green);
    }

    &.text-blue {
      --btn-outline-color: var(--blue);
      --btn-focus-color: var(--blue);
    }

    &.text-red {
      --btn-outline-color: var(--red);
      --btn-focus-color: var(--red);
    }

    &.text-amber {
      --btn-outline-color: var(--amber);
      --btn-focus-color: var(--amber);
    }

    &.text-yellow {
      --btn-outline-color: var(--yellow);
      --btn-focus-color: var(--yellow);
    }

    &.text-teal {
      --btn-outline-color: var(--teal);
      --btn-focus-color: var(--teal);
    }

    &.text-coral {
      --btn-outline-color: var(--coral);
      --btn-focus-color: var(--coral);
    }

    &.text-fuchsia {
      --btn-outline-color: var(--fuchsia);
      --btn-focus-color: var(--fuchsia);
    }

    &.text-mint {
      --btn-outline-color: var(--mint);
      --btn-focus-color: var(--mint);
    }

    &.text-sky {
      --btn-outline-color: var(--sky);
      --btn-focus-color: var(--sky);
    }

    &.text-purple {
      --btn-outline-color: var(--purple);
      --btn-focus-color: var(--purple);
    }

    &.text-orange {
      --btn-outline-color: var(--orange);
      --btn-focus-color: var(--orange);
    }

    &.text-yellow:hover:not(:disabled),
    &.text-amber:hover:not(:disabled) {
      color: var(--charcoal);
    }
  }

  &.btn--ghost {
    --btn-focus-color: var(--color-text);
    background: transparent;
    border-color: transparent;
    color: var(--color-text);
    box-shadow: none;

    &:hover:not(:disabled) {
      background: var(--gray-100);
      transform: translateY(-4px);
      box-shadow: none;
    }

    &:active:not(:disabled) {
      transform: translateY(2px);
      box-shadow: none;
    }

    &.text-primary {
      color: var(--color-primary);
    }

    &.text-secondary {
      color: var(--color-secondary);
    }

    &.text-pink {
      color: var(--pink);
    }

    &.text-green {
      color: var(--green);
    }

    &.text-blue {
      color: var(--blue);
    }

    &.text-red {
      color: var(--red);
    }

    &.text-amber {
      color: var(--amber);
    }
  }

  &.btn--no-shadow {
    box-shadow: none;

    &:hover:not(:disabled) {
      box-shadow: none;
    }

    &:active:not(:disabled) {
      box-shadow: none;
    }
  }

  &.btn--rounded {
    border-radius: 0.5rem;
  }

  &.btn--sm {
    padding: var(--space-1) var(--space-6);
    font-size: var(--text-xs);
  }

  &.btn--lg {
    padding: var(--space-3) var(--space-8);
    font-size: var(--text-base);
  }

  /* Palette colors */
  &.btn--coal {
    --btn-focus-color: var(--coal);
    background: var(--coal);
    border-color: var(--coal);
    color: var(--white);
  }

  &.btn--charcoal {
    --btn-focus-color: var(--charcoal);
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: var(--white);
  }

  &.btn--charcoal-muted {
    --btn-focus-color: var(--charcoal-muted);
    background: var(--charcoal-muted);
    border-color: var(--charcoal-muted);
    color: var(--white);
  }

  &.btn--gray {
    --btn-focus-color: var(--gray);
    background: var(--gray);
    border-color: var(--gray);
    color: var(--white);
  }

  &.btn--yellow {
    --btn-focus-color: var(--yellow);
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--charcoal);
  }

  &.btn--pink {
    --btn-focus-color: var(--pink);
    background: var(--pink);
    border-color: var(--pink);
    color: var(--white);
  }

  &.btn--green {
    --btn-focus-color: var(--green);
    background: var(--green);
    border-color: var(--green);
    color: var(--white);
  }

  &.btn--purple {
    --btn-focus-color: var(--purple);
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
  }

  &.btn--beige {
    --btn-focus-color: var(--beige);
    background: var(--beige);
    border-color: var(--beige);
    color: var(--charcoal);
  }

  &.btn--blue {
    --btn-focus-color: var(--blue);
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
  }

  &.btn--orange {
    --btn-focus-color: var(--orange);
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
  }

  &.btn--red {
    --btn-focus-color: var(--red);
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
  }

  &.btn--white {
    --btn-focus-color: var(--white);
    background: var(--white);
    border-color: var(--white);
    color: var(--charcoal);
  }
}

.btn__state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);

  &[hidden] {
    display: none;
  }
}

/**
 * Badges / tags. Status pills, labels, role tags.
 * Solid palette colors; text color set for contrast (white on saturated, charcoal on light).
 * Use .badge and optional .badge-primary, .badge-success, etc.
 */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  padding: var(--space-1) var(--space-3);
  border-radius: 100px;
  border: none;
  background: var(--gray-200);
  color: var(--charcoal);
  white-space: nowrap;
}

.badge-primary {
  background: var(--color-primary);
  color: var(--white);
}

.badge-secondary {
  background: var(--color-secondary);
  color: var(--white);
}

.badge-success {
  background: var(--green);
  color: var(--white);
}

.badge-warning {
  background: var(--yellow);
  color: var(--charcoal);
}

.badge-error {
  background: var(--red);
  color: var(--white);
}

.badge-info {
  background: var(--blue);
  color: var(--white);
}

.badge-neutral {
  background: var(--gray-200);
  color: var(--charcoal);
}

.badge-pink {
  background: var(--pink);
  color: var(--white);
}

.badge-blue {
  background: var(--blue);
  color: var(--white);
}

.badge-green {
  background: var(--green);
  color: var(--white);
}

.badge-yellow {
  background: var(--yellow);
  color: var(--charcoal);
}

.badge-purple {
  background: var(--purple);
  color: var(--white);
}

.badge-orange {
  background: var(--orange);
  color: var(--white);
}

.badge-red {
  background: var(--red);
  color: var(--white);
}

.badge-sm {
  font-size: 0.6875rem;
  padding: 0.125rem var(--space-2);
}

.badge-lg {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

/**
 * Card component. Two layouts: vertical (image top, content below) and horizontal (image left, content right).
 * Reuse bg-* classes for background. Shadow and hover match button style (raise + stronger shadow).
 */

.card {
  display: block;
  padding: var(--space-4);
  border-radius: 0.75rem;
  border: 3px solid var(--charcoal);
  color: var(--charcoal);
  box-shadow: 0 6px 0 0 var(--charcoal);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  text-decoration: none;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 2px -2px var(--charcoal);
  }

  &:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 var(--charcoal);
  }

  &.card-flat {
    box-shadow: none;
  }

  &.card-flat:hover {
    transform: none;
    box-shadow: none;
  }

  &.card-flat:active {
    transform: none;
    box-shadow: none;
  }

  &.card-no-padding {
    padding: 0;
  }

  &.card-no-border {
    border: none;
  }

  &:has(.table) {
    overflow: hidden;
  }

  .table {
    margin-bottom: 0;
  }

  &.bg-gray,
  &.bg-coal,
  &.bg-charcoal {
    color: var(--white);
  }

  &.card-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);

    .card-image,
    .card-placeholder {
      order: 0;
    }

    .card-body {
      order: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
  }

  &.card-horizontal {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-4);

    .card-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      align-self: start;
    }
  }

  .card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--charcoal);

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      vertical-align: middle;
    }
  }

  .card-placeholder {
    width: 100%;
    min-height: 8rem;
    border-radius: 0.375rem;
    background: var(--charcoal);
  }

  .card-body {
    text-align: left;
  }

  .card-title {
    font-family: var(--font-display);
    line-height: 1.1;
    font-weight: var(--font-display-weight);
    text-transform: uppercase;
    margin: 0;
    color: inherit;
  }

  p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: inherit;
  }
}

/**
 * Table component.
 * Theme-aware; optional bordered and striped variants.
 */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-4);

  th,
  td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
  }

  thead th {
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    background: var(--gray-75);
    color: var(--color-text);
    border-bottom-width: 2px;
    border-bottom-color: var(--gray-300);
  }

  tbody tr:nth-child(odd) {
    background: transparent;
  }

  tbody tr:nth-child(even) {
    background: var(--gray-50);
  }

  &.table--bordered th,
  &.table--bordered td {
    border: 1px solid var(--gray-200);
  }

  &.table--striped tbody tr:nth-child(odd) {
    background: var(--gray-50);
  }

  &.table--striped tbody tr:nth-child(even) {
    background: var(--gray-200);
  }

  &.table--heading-primary thead th {
    background: var(--color-primary);
    color: var(--white);
    border-bottom-color: var(--color-primary);
  }

  &.table--heading-secondary thead th {
    background: var(--color-secondary);
    color: var(--white);
    border-bottom-color: var(--color-secondary);
  }

  &.table--heading-green thead th {
    background: var(--green);
    color: var(--white);
    border-bottom-color: var(--green);
  }
}

/**
 * Tabs component.
 * Tab list + tab buttons + panels. Use with tabs.js for keyboard and aria.
 */

.tabs {
  width: 100%;
  margin-bottom: var(--space-4);

  .tabs__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--gray-200);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;

    &::-webkit-scrollbar {
      height: 4px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--gray-300);
      border-radius: 2px;

      &:hover {
        background: var(--gray-400);
      }
    }
  }

  .tabs__tab {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    margin-bottom: -2px;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;

    &:hover {
      color: var(--color-text);
    }

    &[aria-selected="true"] {
      color: var(--color-primary);
      border-bottom-color: var(--color-primary);
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  &.tabs--multicolor .tabs__tab {
    &.tabs__tab--pink {
      color: var(--pink);
    }

    &.tabs__tab--blue {
      color: var(--blue);
    }

    &.tabs__tab--green {
      color: var(--green);
    }

    &.tabs__tab--yellow {
      color: var(--yellow);
    }

    &.tabs__tab--purple {
      color: var(--purple);
    }

    &.tabs__tab--orange {
      color: var(--orange);
    }

    &.tabs__tab--red {
      color: var(--red);
    }

    &.tabs__tab--beige {
      color: var(--beige-on-light);
    }

    &.tabs__tab--pink:hover {
      color: var(--pink);
    }

    &.tabs__tab--blue:hover {
      color: var(--blue);
    }

    &.tabs__tab--green:hover {
      color: var(--green);
    }

    &.tabs__tab--yellow:hover {
      color: var(--yellow);
    }

    &.tabs__tab--purple:hover {
      color: var(--purple);
    }

    &.tabs__tab--orange:hover {
      color: var(--orange);
    }

    &.tabs__tab--red:hover {
      color: var(--red);
    }

    &.tabs__tab--beige:hover {
      color: var(--beige-on-light);
    }

    &.tabs__tab--pink[aria-selected="true"] {
      color: var(--white);
      background: var(--pink);
      border-bottom-color: var(--pink);
    }

    &.tabs__tab--blue[aria-selected="true"] {
      color: var(--white);
      background: var(--blue);
      border-bottom-color: var(--blue);
    }

    &.tabs__tab--green[aria-selected="true"] {
      color: var(--white);
      background: var(--green);
      border-bottom-color: var(--green);
    }

    &.tabs__tab--yellow[aria-selected="true"] {
      color: var(--charcoal);
      background: var(--yellow);
      border-bottom-color: var(--yellow);
    }

    &.tabs__tab--purple[aria-selected="true"] {
      color: var(--white);
      background: var(--purple);
      border-bottom-color: var(--purple);
    }

    &.tabs__tab--orange[aria-selected="true"] {
      color: var(--white);
      background: var(--orange);
      border-bottom-color: var(--orange);
    }

    &.tabs__tab--red[aria-selected="true"] {
      color: var(--white);
      background: var(--red);
      border-bottom-color: var(--red);
    }

    &.tabs__tab--beige[aria-selected="true"] {
      color: var(--white);
      background: var(--beige-on-light);
      border-bottom-color: var(--beige-on-light);
    }
  }

  .tabs__panel {
    padding: var(--space-4) 0;
    color: var(--color-text);

    &[hidden] {
      display: none;
    }
  }

  &.tabs--multicolor .tabs__panel {
    &:nth-child(2):not([hidden]) {
      background: color-mix(in srgb, var(--pink) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(3):not([hidden]) {
      background: color-mix(in srgb, var(--blue) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(4):not([hidden]) {
      background: color-mix(in srgb, var(--green) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(5):not([hidden]) {
      background: color-mix(in srgb, var(--yellow) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(6):not([hidden]) {
      background: color-mix(in srgb, var(--purple) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(7):not([hidden]) {
      background: color-mix(in srgb, var(--orange) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(8):not([hidden]) {
      background: color-mix(in srgb, var(--red) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }

    &:nth-child(9):not([hidden]) {
      background: color-mix(in srgb, var(--beige-on-light) 14%, var(--color-bg));
      padding: var(--space-4);
      border-radius: 0 0 0.5rem 0.5rem;
    }
  }

  &.tabs--card {
    background: var(--white);
    border-radius: 0.75rem;
    padding: var(--space-4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    .tabs__list {
      margin-left: calc(-1 * var(--space-4));
      margin-right: calc(-1 * var(--space-4));
      padding-left: var(--space-4);
      padding-right: var(--space-4);
      margin-top: calc(-1 * var(--space-4));
      padding-top: 0;
      padding-bottom: 0;
    }

    .tabs__panel {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &.tabs--primary .tabs__tab[aria-selected="true"] {
    color: var(--white);
    background: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  &.tabs--primary .tabs__panel:not([hidden]) {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg));
    padding: var(--space-4);
    border-radius: 0 0 0.5rem 0.5rem;
  }

  &.tabs--secondary .tabs__tab[aria-selected="true"] {
    color: var(--white);
    background: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
  }

  &.tabs--secondary .tabs__panel:not([hidden]) {
    background: color-mix(in srgb, var(--color-secondary) 14%, var(--color-bg));
    padding: var(--space-4);
    border-radius: 0 0 0.5rem 0.5rem;
  }

  &.tabs--green .tabs__tab[aria-selected="true"] {
    color: var(--white);
    background: var(--green);
    border-bottom-color: var(--green);
  }

  &.tabs--green .tabs__panel:not([hidden]) {
    background: color-mix(in srgb, var(--green) 14%, var(--color-bg));
    padding: var(--space-4);
    border-radius: 0 0 0.5rem 0.5rem;
  }

  &.tabs--filled .tabs__list {
    border-bottom: none;
    margin-bottom: 0;
  }

  &.tabs--filled .tabs__tab {
    border-radius: 0.5rem 0.5rem 0 0;

    &[aria-selected="true"] {
      border-bottom: none;
    }
  }

  &.tabs--filled.tabs--primary .tabs__panel:not([hidden]) {
    background: var(--color-primary);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--secondary .tabs__panel:not([hidden]) {
    background: var(--color-secondary);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--green .tabs__panel:not([hidden]) {
    background: var(--green);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(2):not([hidden]) {
    background: var(--pink);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(3):not([hidden]) {
    background: var(--blue);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(4):not([hidden]) {
    background: var(--green);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(5):not([hidden]) {
    background: var(--yellow);
    color: var(--charcoal);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(6):not([hidden]) {
    background: var(--purple);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(7):not([hidden]) {
    background: var(--orange);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(8):not([hidden]) {
    background: var(--red);
    color: var(--white);
    padding: var(--space-4);
  }

  &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(9):not([hidden]) {
    background: var(--beige-on-light);
    color: var(--white);
    padding: var(--space-4);
  }
}

/**
 * Icon utilities for use with Font Awesome (or other icon fonts).
 * Include Font Awesome separately via CDN or npm; these classes size and align icons.
 */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  width: 1em;
  height: 1em;

  &.icon--sm {
    font-size: 0.875em;
    width: 0.875em;
    height: 0.875em;
  }

  &.icon--lg {
    font-size: 1.25em;
    width: 1.25em;
    height: 1.25em;
  }

  &.icon--before {
    margin-right: var(--space-2);
  }

  &.icon--after {
    margin-left: var(--space-2);
  }
}

/**
 * Loader (spinner) for use inside buttons or standalone.
 * Use with an img pointing to loader.svg, or inline the SVG.
 */

.loader {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;

  &.loader--sm {
    width: 0.875em;
    height: 0.875em;
  }

  &.loader--lg {
    width: 1.5em;
    height: 1.5em;
  }
}

/* When loader is used inside an img, currentColor does not apply; use filter to match button text */
/* Light loader (white) on buttons with light text */
.btn--primary .loader,
.btn--secondary .loader,
.btn--ghost .loader {
  filter: brightness(0) invert(1);
}

/* Dark loader on buttons with dark text */
.btn--yellow .loader,
.btn--beige .loader,
.btn--white .loader {
  filter: brightness(0);
}

/**
 * Alerts / toasts. Two variants: inline (fixed in flow) and floating (fixed position).
 * Types: error, warning, success, info. Optional dismiss button.
 * Tune tint via --alert-bg-mix and --alert-border-mix (color-mix % with theme bg / transparent).
 */

.alert {
  --alert-bg-mix: 14%;
  --alert-border-mix: 42%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  border: 4px solid transparent;

  .alert__message {
    flex: 1;
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  .alert__dismiss {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.8;
    line-height: 1;
    border-radius: 0.25rem;
    font-size: 1.5rem;

    i {
      font-size: inherit;
    }

    &:hover {
      opacity: 1;
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
  }

  &.alert--inline {
    width: 100%;
  }

  &.alert--floating {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &.alert--error {
    --alert-bg-mix: 12%;
    background: color-mix(in srgb, var(--red) var(--alert-bg-mix), var(--color-bg));
    border-color: color-mix(in srgb, var(--red) var(--alert-border-mix), transparent);
    color: var(--charcoal);
  }

  &.alert--warning {
    --alert-bg-mix: 18%;
    background: color-mix(in srgb, var(--yellow) var(--alert-bg-mix), var(--color-bg));
    border-color: color-mix(in srgb, var(--yellow) var(--alert-border-mix), transparent);
    color: var(--charcoal);
  }

  &.alert--success {
    --alert-bg-mix: 14%;
    background: color-mix(in srgb, var(--green) var(--alert-bg-mix), var(--color-bg));
    border-color: color-mix(in srgb, var(--green) var(--alert-border-mix), transparent);
    color: var(--charcoal);
  }

  &.alert--info {
    --alert-bg-mix: 14%;
    background: color-mix(in srgb, var(--blue) var(--alert-bg-mix), var(--color-bg));
    border-color: color-mix(in srgb, var(--blue) var(--alert-border-mix), transparent);
    color: var(--charcoal);
  }
}

.alerts--floating {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 20rem;
  max-width: 28rem;
}

/**
 * Form styling. Inputs, labels, hints, and groups.
 * Block inputs, border, focus ring, theme-aware.
 */

.form__group {
  margin-bottom: var(--space-4);
}

.form__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);

  &.form__label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.form__input,
.form__textarea,
.form__select {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 0.375rem;
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;

  &::placeholder {
    color: var(--gray-300);
  }

  &:hover {
    border-color: var(--gray-300);
  }

  &:focus {
    outline: none;
    border: 2px solid var(--color-primary);
  }

  &:focus:hover {
    border-color: var(--color-primary);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.form__textarea {
  min-height: 6rem;
  resize: vertical;
}

.form__select {
  cursor: pointer;
  appearance: auto;
}

.form--filled .form__input:focus,
.form--filled .form__input:not(:placeholder-shown),
.form--filled .form__textarea:focus,
.form--filled .form__textarea:not(:placeholder-shown),
.form--filled .form__select:focus {
  background: var(--color-primary);
  color: var(--white);
  border-color: var(--color-primary);
}

.form--filled .form__input::placeholder,
.form--filled .form__textarea::placeholder {
  color: var(--gray-300);
}

.form--filled .form__input:focus::placeholder,
.form--filled .form__input:not(:placeholder-shown)::placeholder,
.form--filled .form__textarea:focus::placeholder,
.form--filled .form__textarea:not(:placeholder-shown)::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.form--filled .form__select:focus {
  color: var(--white);
}

.form--filled .form__select option {
  background: var(--white);
  color: var(--color-text);
}

.form--filled .form__input:disabled,
.form--filled .form__textarea:disabled,
.form--filled .form__select:disabled {
  opacity: 0.7;
}

.form--filled .form__input:hover,
.form--filled .form__textarea:hover,
.form--filled .form__select:hover {
  border-color: var(--gray-300);
}

.form--filled .form__input:focus:hover,
.form--filled .form__input:not(:placeholder-shown):hover,
.form--filled .form__textarea:focus:hover,
.form--filled .form__textarea:not(:placeholder-shown):hover,
.form--filled .form__select:focus:hover {
  border-color: var(--color-primary);
}

.form__hint {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-top: var(--space-1);
}

.form__error {
  font-size: var(--text-xs);
  color: var(--red);
  margin-top: var(--space-1);
}

.form__input--error,
.form__textarea--error,
.form__select--error {
  border-color: var(--red);

  &:focus {
    border-color: var(--red);
  }
}

.form__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;

  input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
    cursor: pointer;
  }
}

/**
 * Switch / toggle component.
 * Checkbox-driven on/off switch. Use with <label class="switch"> and <input type="checkbox" class="switch__input">.
 */

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;

  .switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

    &:checked+.switch__track {
      background: var(--color-primary);

      &::after {
        transform: translateX(1.25rem);
      }
    }

    &:focus-visible+.switch__track {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    &:disabled+.switch__track {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  &:has(.switch__input:disabled) {
    cursor: not-allowed;
  }

  .switch__track {
    position: relative;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--gray-200);
    border-radius: 9999px;
    transition: background 0.2s ease;

    &::after {
      content: "";
      position: absolute;
      top: 0.25rem;
      left: 0.25rem;
      width: 1rem;
      height: 1rem;
      background: var(--white);
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      transition: transform 0.2s ease;
    }
  }
}

/**
 * Dropdown component (replacement for native select).
 * Trigger opens a panel of options; use with dropdown.js for behavior.
 * Include a hidden input with the same name as the original select for form submission.
 */

.dropdown {
  position: relative;
  width: 100%;

  .dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 0.375rem;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
    appearance: none;

    &:hover {
      border-color: var(--gray-300);
    }

    &[aria-expanded="true"] {
      border-color: var(--color-primary);
      outline: none;

      &::after {
        transform: rotate(-135deg);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }

    &::after {
      content: "";
      flex-shrink: 0;
      width: 0.5rem;
      height: 0.5rem;
      margin-left: var(--space-2);
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      opacity: 0.7;
      transition: transform 0.2s ease;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  &.dropdown--disabled .dropdown__trigger {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .dropdown__panel {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: var(--space-1);
    margin: 0;

    &[hidden] {
      display: none;
    }
  }

  .dropdown__option {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: transparent;
    border: none;
    border-radius: 0.25rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;

    &:hover,
    &[aria-selected="true"] {
      background: color-mix(in srgb, var(--color-primary) 42%, transparent);
      color: var(--color-text);
    }

    &[aria-selected="true"] {
      font-weight: var(--font-semibold);
    }
  }
}

/**
 * Modal. Floating card-style dialog; pop in/out animation; backdrop; big close X; size variants.
 * Add bg-* to .modal-box for background. Use modal.js for open/close.
 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease, opacity 0.2s ease;

  &[aria-hidden="false"],
  &.is-open {
    visibility: visible;
    opacity: 1;
  }

  &.is-closing .modal-backdrop {
    opacity: 0;
  }

  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  &[aria-hidden="false"] .modal-backdrop,
  &.is-open .modal-backdrop {
    opacity: 1;
  }

  .modal-box {
    position: relative;
    width: 90vw;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    border: 3px solid var(--charcoal);
    box-shadow: 0 6px 0 0 var(--charcoal);
    color: var(--charcoal);
    background: var(--modal-bg, var(--white));
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    overflow: hidden;

    &.bg-primary {
      background-color: var(--color-primary);
      color: var(--white);

      .modal-close {
        color: var(--white);
      }
    }
  }

  &[aria-hidden="false"] .modal-box,
  &.is-open .modal-box {
    transform: scale(1);
    opacity: 1;
  }

  &.is-closing .modal-box {
    transform: scale(0.96);
    opacity: 0;
  }

  &.modal-small .modal-box {
    max-width: 22rem;
  }

  &.modal-medium .modal-box {
    max-width: 32rem;
  }

  &.modal-large .modal-box {
    max-width: 48rem;
  }

  .modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: inherit;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;

    &:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.08);
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 2px;
    }
  }

  .modal-header {
    padding: var(--space-6) var(--space-6) var(--space-2);
    padding-right: 3rem;

    h2,
    .modal-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: var(--font-display-weight);
      text-transform: uppercase;
      line-height: var(--leading-tight);
      color: inherit;
    }
  }

  .modal-body {
    padding: var(--space-4) var(--space-6);
    overflow-y: auto;
    flex: 1 1 auto;

    p {
      margin: 0 0 var(--space-2);
      font-size: var(--text-sm);
      line-height: var(--leading-normal);
      color: inherit;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: 1px solid var(--gray-200);
  }

  .btn {
    box-shadow: none;

    &:hover:not(:disabled) {
      box-shadow: none;
    }

    &:active:not(:disabled) {
      box-shadow: none;
    }
  }
}

@media (min-width: 48rem) {
  .modal.modal-medium .modal-box {
    max-width: 36rem;
  }

  .modal.modal-large .modal-box {
    max-width: 56rem;
  }
}

/**
 * Catppuccin flavor themes.
 * Apply with data-theme="latte" | "frappe" | "macchiato" | "mocha".
 * One-to-one mapping: each Catppuccin accent and gray has a matching token.
 */

/* --- Latte (light) --- */
html[data-theme="latte"],
.color-punch-root[data-theme="latte"] {
  --color-bg: #eff1f5;
  --color-text: #4c4f69;
  --color-muted: #5c5f77;
  --color-primary: #ea76cb;
  --color-secondary: #1e66f5;

  --coal: #4c4f69;
  --charcoal: #4c4f69;
  --charcoal-muted: #5c5f77;
  --gray: #6c6f85;
  --white: #ffffff;

  --rosewater: #dc8a78;
  --flamingo: #dd7878;
  --pink: #ea76cb;
  --purple: #8839ef;
  --red: #d20f39;
  --maroon: #e64553;
  --orange: #fe640b;
  --yellow: #df8e1d;
  --green: #40a02b;
  --teal: #179299;
  --sky: #04a5e5;
  --sapphire: #209fb5;
  --blue: #1e66f5;
  --lavender: #7287fd;

  --coral: #d20f39;
  --amber: #df8e1d;
  --fuchsia: #8839ef;
  --mint: #40a02b;

  --beige: #dc8a78;
  --gray-25: #eff1f5;
  --gray-50: #e6e9ef;
  --gray-75: #dce0e8;
  --gray-100: #ccd0da;
  --gray-200: #bcc0cc;
  --gray-300: #acb0be;
  --gray-400: #9ca0b0;
  --gray-500: #8c8fa1;
  --gray-600: #7c7f93;
  --gray-700: #6c6f85;
  --gray-800: #5c5f77;
  --gray-900: #4c4f69;

  --beige-on-light: #6c6f85;

  & .card,
  & .card .card-title,
  & .card p {
    color: #1e2030;
  }

  & .btn--yellow {
    color: var(--white);
  }
}

/* --- Frappé (dark) --- */
html[data-theme="frappe"],
.color-punch-root[data-theme="frappe"] {
  --color-bg: #303446;
  --color-text: #c6d0f5;
  --color-muted: #b5bfe2;
  --color-primary: #f4b8e4;
  --color-secondary: #8caaee;

  --coal: #232634;
  --charcoal: #292c3c;
  --charcoal-muted: #414559;
  --gray: #51576d;
  --white: #c6d0f5;

  --rosewater: #f2d5cf;
  --flamingo: #eebebe;
  --pink: #f4b8e4;
  --purple: #ca9ee6;
  --red: #e78284;
  --maroon: #ea999c;
  --orange: #ef9f76;
  --yellow: #e5c890;
  --green: #a6d189;
  --teal: #81c8be;
  --sky: #99d1db;
  --sapphire: #85c1dc;
  --blue: #8caaee;
  --lavender: #babbf1;

  --coral: #e78284;
  --amber: #e5c890;
  --fuchsia: #ca9ee6;
  --mint: #a6d189;

  --beige: #f2d5cf;
  --gray-25: #c6d0f5;
  --gray-50: #b5bfe2;
  --gray-75: #a5adce;
  --gray-100: #949cbb;
  --gray-200: #838ba7;
  --gray-300: #737994;
  --gray-400: #626880;
  --gray-500: #51576d;
  --gray-600: #414559;
  --gray-700: #303446;
  --gray-800: #292c3c;
  --gray-900: #232634;

  --beige-on-light: #c6d0f5;
}

/* --- Macchiato (dark) --- */
html[data-theme="macchiato"],
.color-punch-root[data-theme="macchiato"] {
  --color-bg: #24273a;
  --color-text: #cad3f5;
  --color-muted: #b8c0e0;
  --color-primary: #f5bde6;
  --color-secondary: #8aadf4;

  --coal: #181926;
  --charcoal: #1e2030;
  --charcoal-muted: #363a4f;
  --gray: #494d64;
  --white: #cad3f5;

  --rosewater: #f4dbd6;
  --flamingo: #f0c6c6;
  --pink: #f5bde6;
  --purple: #c6a0f6;
  --red: #ed8796;
  --maroon: #ee99a0;
  --orange: #f5a97f;
  --yellow: #eed49f;
  --green: #a6da95;
  --teal: #8bd5ca;
  --sky: #91d7e3;
  --sapphire: #7dc4e4;
  --blue: #8aadf4;
  --lavender: #b7bdf8;

  --coral: #ed8796;
  --amber: #eed49f;
  --fuchsia: #c6a0f6;
  --mint: #a6da95;

  --beige: #f4dbd6;
  --gray-25: #cad3f5;
  --gray-50: #b8c0e0;
  --gray-75: #a5adcb;
  --gray-100: #939ab7;
  --gray-200: #8087a2;
  --gray-300: #6e738d;
  --gray-400: #5b6078;
  --gray-500: #494d64;
  --gray-600: #363a4f;
  --gray-700: #24273a;
  --gray-800: #1e2030;
  --gray-900: #181926;

  --beige-on-light: #cad3f5;
}

/* --- Mocha (dark) --- */
html[data-theme="mocha"],
.color-punch-root[data-theme="mocha"] {
  --color-bg: #1e1e2e;
  --color-text: #cdd6f4;
  --color-muted: #bac2de;
  --color-primary: #f5c2e7;
  --color-secondary: #89b4fa;

  --coal: #11111b;
  --charcoal: #181825;
  --charcoal-muted: #313244;
  --gray: #45475a;
  --white: #cdd6f4;

  --rosewater: #f5e0dc;
  --flamingo: #f2cdcd;
  --pink: #f5c2e7;
  --purple: #cba6f7;
  --red: #f38ba8;
  --maroon: #eba0ac;
  --orange: #fab387;
  --yellow: #f9e2af;
  --green: #a6e3a1;
  --teal: #94e2d5;
  --sky: #89dceb;
  --sapphire: #74c7ec;
  --blue: #89b4fa;
  --lavender: #b4befe;

  --coral: #f38ba8;
  --amber: #f9e2af;
  --fuchsia: #cba6f7;
  --mint: #a6e3a1;

  --beige: #f5e0dc;
  --gray-25: #cdd6f4;
  --gray-50: #bac2de;
  --gray-75: #a6adc8;
  --gray-100: #9399b2;
  --gray-200: #7f849c;
  --gray-300: #6c7086;
  --gray-400: #585b70;
  --gray-500: #45475a;
  --gray-600: #313244;
  --gray-700: #1e1e2e;
  --gray-800: #181825;
  --gray-900: #11111b;

  --beige-on-light: #cdd6f4;
}

/**
 * Dark theme overrides (component layout/surfaces).
 * Applied when html or .color-punch-root has .dark or data-theme (dark / Catppuccin dark).
 * Palette variables for Catppuccin are set in themes-catppuccin.css.
 */

html.dark,
html[data-theme="dark"],
html[data-theme="frappe"],
html[data-theme="macchiato"],
html[data-theme="mocha"],
.color-punch-root.dark,
.color-punch-root[data-theme="dark"],
.color-punch-root[data-theme="frappe"],
.color-punch-root[data-theme="macchiato"],
.color-punch-root[data-theme="mocha"] {

  /* --- Typography --- */
  & code {
    background: var(--gray-500);
    color: var(--white);
  }

  /* --- Accordion --- */
  & .accordion {
    & .accordion__item {
      border-bottom-color: var(--gray-600);
    }

    & .accordion__summary {
      background: var(--coal);
      color: var(--beige);

      &:hover {
        background: var(--color-primary);
        color: var(--charcoal);
      }
    }

    & .accordion__details[open] .accordion__summary {
      background: var(--color-primary);
      color: var(--charcoal);
    }

    & .accordion__panel {
      background: transparent;
      color: var(--beige);
    }
  }

  /* --- Table --- */
  & .table {

    & th,
    & td {
      border-bottom-color: var(--gray-600);
    }

    & thead th {
      background: var(--gray-700);
      border-bottom-color: var(--gray-500);
    }

    & tbody tr:nth-child(odd) {
      background: var(--gray-800);
    }

    & tbody tr:nth-child(even) {
      background: var(--gray-700);
    }

    &.table--bordered th,
    &.table--bordered td {
      border-color: var(--gray-600);
    }

    &.table--striped tbody tr:nth-child(odd) {
      background: var(--gray-800);
    }

    &.table--striped tbody tr:nth-child(even) {
      background: var(--gray-600);
    }

    &.table--heading-primary thead th {
      background: var(--color-primary);
      color: var(--charcoal);
      border-bottom-color: var(--color-primary);
    }

    &.table--heading-secondary thead th {
      background: var(--color-secondary);
      color: var(--charcoal);
      border-bottom-color: var(--color-secondary);
    }

    &.table--heading-green thead th {
      background: var(--green);
      color: var(--charcoal);
      border-bottom-color: var(--green);
    }
  }

  /* --- Switch --- */
  & .switch {
    & .switch__track {
      background: var(--gray-600);

      &::after {
        background: var(--gray-100);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      }
    }

    & .switch__input:checked+.switch__track {
      background: var(--color-primary);
    }
  }

  /* --- Dropdown --- */
  & .dropdown {
    & .dropdown__trigger {
      background: var(--charcoal);
      border-color: transparent;
      color: var(--beige);

      &:hover {
        border-color: var(--gray-600);
      }
    }

    & .dropdown__panel {
      background: var(--charcoal);
      border-color: var(--gray-600);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    & .dropdown__option {
      color: var(--beige);

      &:hover,
      &[aria-selected="true"] {
        background: color-mix(in srgb, var(--color-primary) 52%, var(--charcoal));
      }
    }
  }

  /* --- Buttons (dark text on light accent for contrast) --- */
  & .btn {
    &:not(.btn--outline):not(.btn--ghost):not(.btn--secondary):not(.btn--coal):not(.btn--charcoal):not(.btn--charcoal-muted):not(.btn--gray):not(.btn--yellow):not(.btn--beige):not(.btn--white) {
      color: var(--charcoal);
    }

    &.btn--secondary {
      background: transparent;
      color: var(--color-secondary);
      border-color: var(--color-secondary);

      &:hover:not(:disabled) {
        background: var(--color-secondary);
        color: var(--charcoal);
      }
    }

    &.btn--outline {
      background: transparent;
      color: var(--btn-outline-color);
      border-color: var(--btn-outline-color);

      &:hover:not(:disabled),
      &:active:not(:disabled) {
        background: var(--btn-outline-color);
        color: var(--charcoal);
      }

      &.text-yellow:hover:not(:disabled),
      &.text-amber:hover:not(:disabled) {
        color: var(--charcoal);
      }
    }

    &.btn--ghost:hover:not(:disabled) {
      background: var(--gray-600);
    }
  }


  /* Loader: dark on buttons with dark text, light on dark-background buttons */
  & .btn:not(.btn--coal):not(.btn--charcoal):not(.btn--charcoal-muted):not(.btn--gray) .loader {
    filter: brightness(0);
  }

  & .btn.btn--coal .loader,
  & .btn.btn--charcoal .loader,
  & .btn.btn--charcoal-muted .loader,
  & .btn.btn--gray .loader {
    filter: brightness(0) invert(1);
  }

  /* --- Card --- */
  & .card {
    border-color: var(--charcoal);
    color: var(--charcoal);

    & .card-title,
    & p {
      color: inherit;
    }

    &.bg-gray,
    &.bg-coal,
    &.bg-charcoal {
      color: var(--white);
    }

    & .card-placeholder {
      background: var(--gray-800);
    }
  }

  /* --- Badge --- */
  & .badge {
    background: var(--gray-600);
    color: var(--beige);

    &.badge-primary {
      background: var(--color-primary);
      color: var(--charcoal);
    }

    &.badge-secondary {
      background: var(--color-secondary);
      color: var(--charcoal);
    }

    &.badge-success,
    &.badge-green {
      background: var(--green);
      color: var(--charcoal);
    }

    &.badge-warning,
    &.badge-yellow {
      background: var(--yellow);
      color: var(--charcoal);
    }

    &.badge-error,
    &.badge-red {
      background: var(--red);
      color: var(--charcoal);
    }

    &.badge-info,
    &.badge-blue {
      background: var(--blue);
      color: var(--charcoal);
    }

    &.badge-neutral {
      background: var(--gray-600);
      color: var(--beige);
    }

    &.badge-pink {
      background: var(--pink);
      color: var(--charcoal);
    }

    &.badge-purple {
      background: var(--purple);
      color: var(--charcoal);
    }

    &.badge-orange {
      background: var(--orange);
      color: var(--charcoal);
    }
  }

  /* --- Tabs --- */
  & .tabs {
    & .tabs__list {
      border-bottom-color: var(--gray-600);
    }

    &.tabs--card {
      background: var(--gray-700);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

    /* Primary/secondary/green selected tab button: dark text on light accent */
    &.tabs--primary .tabs__tab[aria-selected="true"],
    &.tabs--secondary .tabs__tab[aria-selected="true"],
    &.tabs--green .tabs__tab[aria-selected="true"] {
      color: var(--charcoal);
    }

    & .tabs__tab--beige[aria-selected="true"] {
      color: var(--charcoal);
      background: var(--beige);
      border-bottom-color: var(--beige);
    }

    &.tabs--multicolor .tabs__tab.tabs__tab--pink[aria-selected="true"],
    &.tabs--multicolor .tabs__tab.tabs__tab--blue[aria-selected="true"],
    &.tabs--multicolor .tabs__tab.tabs__tab--green[aria-selected="true"],
    &.tabs--multicolor .tabs__tab.tabs__tab--purple[aria-selected="true"],
    &.tabs--multicolor .tabs__tab.tabs__tab--orange[aria-selected="true"],
    &.tabs--multicolor .tabs__tab.tabs__tab--red[aria-selected="true"] {
      color: var(--charcoal);
    }

    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(2):not([hidden]),
    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(3):not([hidden]),
    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(4):not([hidden]),
    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(6):not([hidden]),
    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(7):not([hidden]),
    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(8):not([hidden]) {
      color: var(--charcoal);
    }

    &.tabs--filled.tabs--multicolor .tabs__panel:nth-child(9):not([hidden]) {
      background: var(--beige);
      color: var(--charcoal);
    }

    &.tabs--filled.tabs--primary .tabs__panel:not([hidden]),
    &.tabs--filled.tabs--secondary .tabs__panel:not([hidden]),
    &.tabs--filled.tabs--green .tabs__panel:not([hidden]) {
      color: var(--charcoal);
    }
  }

  /* --- Modal --- */
  & .modal {
    & .modal-close:hover {
      background: rgba(255, 255, 255, 0.12);
    }

    & .modal-footer {
      border-top-color: var(--gray-600);
    }

    & .modal-box {
      --modal-bg: var(--charcoal);
      color: var(--beige);
      border-color: var(--gray-600);

      &.bg-primary {
        background: var(--color-primary);
        color: var(--charcoal);

        & .modal-close {
          color: var(--charcoal);
        }
      }

      &.bg-beige {
        background: var(--beige);
        color: var(--charcoal);
      }

      &.bg-mint {
        background: var(--mint);
        color: var(--charcoal);
      }
    }
  }

  /* --- Form --- */
  & .form__input,
  & .form__textarea,
  & .form__select {
    background: var(--charcoal);
    border-color: transparent;
    color: var(--beige);

    &:hover {
      border-color: var(--gray-600);
    }

    &::placeholder {
      color: var(--gray-400);
    }

    &:focus {
      border: 2px solid var(--color-primary);
    }
  }

  & .form--filled {

    & .form__input:focus,
    & .form__input:not(:placeholder-shown),
    & .form__textarea:focus,
    & .form__textarea:not(:placeholder-shown),
    & .form__select:focus {
      background: var(--color-primary);
      color: var(--charcoal);
      border-color: var(--color-primary);
    }
  }

  /* --- Alert / Toast --- */
  & .alert {
    --alert-bg-mix: 50%;
    --alert-border-mix: 70%;

    &.alert--floating {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    &.alert--error {
      background: color-mix(in srgb, var(--red) var(--alert-bg-mix), var(--color-bg));
      border-color: color-mix(in srgb, var(--red) var(--alert-border-mix), transparent);
      color: var(--beige);
    }

    &.alert--warning {
      background: color-mix(in srgb, var(--yellow) var(--alert-bg-mix), var(--color-bg));
      border-color: color-mix(in srgb, var(--yellow) var(--alert-border-mix), transparent);
      color: var(--beige);
    }

    &.alert--success {
      background: color-mix(in srgb, var(--green) var(--alert-bg-mix), var(--color-bg));
      border-color: color-mix(in srgb, var(--green) var(--alert-border-mix), transparent);
      color: var(--beige);
    }

    &.alert--info {
      background: color-mix(in srgb, var(--blue) var(--alert-bg-mix), var(--color-bg));
      border-color: color-mix(in srgb, var(--blue) var(--alert-border-mix), transparent);
      color: var(--beige);
    }
  }
}

/* Catppuccin dark themes only: toast/alert text dark for contrast on tinted background */
html[data-theme="frappe"],
html[data-theme="macchiato"],
html[data-theme="mocha"],
.color-punch-root[data-theme="frappe"],
.color-punch-root[data-theme="macchiato"],
.color-punch-root[data-theme="mocha"] {

  & .alert.alert--error,
  & .alert.alert--warning,
  & .alert.alert--success,
  & .alert.alert--info {
    color: var(--charcoal);
  }
}