/* ===== CSS Variables ===== */
:root {
  --sans-font: -apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Nimbus Sans L",Roboto,"Noto Sans","Segoe UI",Arial,Helvetica,"Helvetica Neue",sans-serif;
  --mono-font: Consolas,Menlo,Monaco,"Andale Mono","Ubuntu Mono",monospace;

  --color-primary: var(--color-black);
  --color-primary-inverted: var(--color-white);
  --color-secondary: #3C3C4399;
  
  --color-red: #FF3B30;
  --color-orange: #FF9500;
  --color-yellow: #FFCC00;
  --color-green: #34C759;
  --color-mint: #00C7BE;
  --color-teal: #30B0C7;
  --color-cyan: #32ADE6;
  --color-blue: #007AFF;
  --color-indigo: #5856D6;
  --color-purple: #AF52DE;
  --color-pink: #FF2D55;
  --color-brown: #A2845E;
  --color-gray: #8E8E93;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-clear: transparent;

  --color-background: var(--color-white);
  --color-background-secondary: #F2F2F7;

  --color-grouped-primary: #F2F2F7;
  --color-grouped-secondary: var(--color-white);

  --color-separator: #C6C6C8;
  --color-link: var(--color-blue);

  /* Font Sizes */
  --font-size-large-title: 2.125rem;  /* 34px */ /* h1 */
  --font-size-title1: 1.75rem;        /* 28px */ /* h2 */
  --font-size-title2: 1.375rem;       /* 22px */ /* h3 */
  --font-size-title3: 1.25rem;        /* 20px */ /* h4 */
  --font-size-headline: 1.0625rem;    /* 17px */ /* h5 */
  --font-size-body: 1.0625rem;        /* 17px */ /* p */
  --font-size-callout: 1rem;          /* 16px */
  --font-size-subhead: 0.9375rem;     /* 15px */ /* h6 */
  --font-size-footnote: 0.8125rem;    /* 13px */ /* small */
  --font-size-caption1: 0.75rem;      /* 12px */
  --font-size-caption2: 0.6875rem;    /* 11px */

  /* Font Weights */
  --font-weight-ultralight: 100;
  --font-weight-thin: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;
}

/* ===== Dark Mode Variables ===== */
[data-theme="dark"],
.dark-mode {
    --color-primary: var(--color-white);
    --color-primary-inverted: var(--color-black);
    --color-secondary: #EBEBF599;
    
    --color-red: #FF453A;
    --color-orange: #FF9F0A;
    --color-yellow: #FFD60A;
    --color-green: #30D158;
    --color-mint: #63E6E2;
    --color-teal: #40CBE0;
    --color-cyan: #64D2FF;
    --color-blue: #0A84FF;
    --color-indigo: #5E5CE6;
    --color-purple: #BF5AF2;
    --color-pink: #FF375F;
    --color-brown: #AC8E68;
    --color-gray: #8E8E93;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-clear: transparent;
  
    --color-background: var(--color-black);
    --color-background-secondary: #1C1C1E;
  
    --color-grouped-primary: #1C1C1E;
    --color-grouped-secondary: #2C2C2E;
  
    --color-separator: #38383A;
}

/* ===== Dracula Theme Variables ===== */
[data-theme="dracula"],
.dracula-theme {
    --color-primary: var(--color-white);
    --color-primary-inverted: var(--color-black);
    --color-secondary: #6272A4;
  
    --color-red: #FF5555; /* dracula */
    --color-orange: #FFB86C; /* dracula */
    --color-yellow: #F1FA8C; /* dracula */
    --color-green: #50FA7B; /* dracula */
    --color-mint: #A4FFFF;
    --color-teal: #69FF94;
    --color-cyan: #8BE9FD; /* dracula */
    --color-blue: #6D8AFF;
    --color-indigo: #6272A4; /* dracula comment */
    --color-purple: #BD93F9; /* dracula */
    --color-pink: #FF79C6; /* dracula */
    --color-brown: #CD8B76;
    --color-gray: #A4A4A4;
    --color-black: #000000;
    --color-white: #F8F8F2; /* dracula foreground */
    --color-clear: transparent;

    --color-background: #282A36; /* dracula */
    --color-background-secondary: #1E1F29;

    --color-grouped-primary: #44475A; /* dracula current line */
    --color-grouped-secondary: #2D2F3A;

    --color-separator: #3A3D4A;
}

/* ===== System Dark Mode Support ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: var(--color-white);
    --color-primary-inverted: var(--color-black);
    --color-secondary: #EBEBF599;
    
    --color-red: #FF453A;
    --color-orange: #FF9F0A;
    --color-yellow: #FFD60A;
    --color-green: #30D158;
    --color-mint: #63E6E2;
    --color-teal: #40CBE0;
    --color-cyan: #64D2FF;
    --color-blue: #0A84FF;
    --color-indigo: #5E5CE6;
    --color-purple: #BF5AF2;
    --color-pink: #FF375F;
    --color-brown: #AC8E68;
    --color-gray: #8E8E93;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-clear: transparent;
  
    --color-background: #000000;
    --color-background-secondary: #1C1C1E;
  
    --color-grouped-primary: #1C1C1E;
    --color-grouped-secondary: #2C2C2E;
  
    --color-separator: #38383A;
  }
}

html {
  font-family: var(--sans-font);
  scroll-behavior: smooth
}

/* ===== Base Reset ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== Layout Stacks ===== */
.vstack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vstack.fill {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vstack.fill > * {
  flex: 1;
}

.hstack {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.hstack.fill {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.hstack.fill > * {
  flex: 1;
}

.hstack.wrap {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  flex-wrap: wrap;
}

.vstack.wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===== Stack Spacing Overrides ===== */
.vstack.s-0,
.hstack.s-0 {
  gap: 0;
}

.vstack.s-1,
.hstack.s-1 {
  gap: 0.25rem;
}

.vstack.s-2,
.hstack.s-2 {
  gap: 0.5rem;
}

.vstack.s-3,
.hstack.s-3 {
  gap: 1rem;
}

.vstack.s-4,
.hstack.s-4 {
  gap: 1.5rem;
}

.vstack.s-5,
.hstack.s-5 {
  gap: 2rem;
}

@media (max-width: 597px) {
  .hstack.mobile-vstack {
    flex-direction: column;
  }
}

.zstack { position: relative; }

.zstack > * {
  position: absolute;
  top: 0;
  left: 0;
}

/* ===== Spacer ===== */
.spacer { flex-grow: 1; }

/* ===== Grow ===== */
.grow { flex-grow: 1; }

/* ===== Divider (adaptive to parent direction) ===== */
.divider {
  background-color: var(--color-separator);
  align-self: stretch;
  opacity: 0.75;
}

.vstack > .divider {
  height: 1px;
  width: 100%;
}

.hstack > .divider {
  width: 1px;
  /* height: 100%; */
}

/* ===== GroupBox ===== */
.groupbox {
  border-radius: 0.5rem; /* rounded */
  padding: 1rem; /* pb-3 */
  background-color: var(--color-grouped-primary);
}

.groupbox .groupbox {
  background-color: var(--color-grouped-secondary);
}

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

.groupbox .groupbox .groupbox .groupbox {
  background-color: var(--color-grouped-secondary);
}

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

.groupbox .groupbox .groupbox .groupbox .groupbox .groupbox {
  background-color: var(--color-grouped-secondary);
}

/* ===== Text & Modifiers ===== */

/* Large Title */
h1, .large-title {
  font-size: var(--font-size-large-title);
  font-weight: var(--font-weight-heavy);
  /* color: var(--color-primary); */
}

/* Title 1 */
h2, .title1 {
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-bold);
  /* color: var(--color-primary); */
}

/* Title 2 */
h3, .title2 {
  font-size: var(--font-size-title2);
  font-weight: var(--font-weight-semibold);
  /* color: var(--color-primary); */
}

/* Title 3 */
h4, .title3 {
  font-size: var(--font-size-title3);
  font-weight: var(--font-weight-semibold);
  /* color: var(--color-primary); */
}

/* Headline */
h5, .headline {
  font-size: var(--font-size-headline);
  font-weight: var(--font-weight-semibold);
  /* color: var(--color-primary); */
}

/* Body */
p, div, body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
}

/* Callout */
.callout {
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-regular);
  /* color: var(--color-primary); */
}

/* Subheadline */
h6, .subhead {
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
  /* color: var(--color-primary); */
}

/* Footnote */
small, .footnote {
  font-size: var(--font-size-footnote);
  font-weight: var(--font-weight-regular);
  /* color: var(--color-primary); */
}

/* Caption 1 */
.caption1 {
  font-size: var(--font-size-caption1);
  font-weight: var(--font-weight-regular);
  /* color: var(--color-primary); */
}

/* Caption 2 */
.caption2 {
  font-size: var(--font-size-caption2);
  font-weight: var(--font-weight-regular);
  /* color: var(--color-primary); */
}

/* ===== Code Elements ===== */
code {
  font-family: var(--mono-font);
  font-size: 0.875em;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  background-color: var(--color-background-secondary);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid var(--color-separator);
}

a {
  color: var(--color-link);
  /* font-weight: var(--font-weight-semibold); */
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a.hover-black {
  text-decoration: none;
}

a.hover-black:hover {
  color: var(--color-primary);
  text-decoration: none;
}

a.hover-underline {
  text-decoration: none;
}

a.hover-underline:hover {
  text-decoration: underline;
}

/* ============================================
   Font Weight Modifiers (SwiftUI Mapping)
============================================ */

/* Short form font-weight classes */
.fw-ultralight, .fw-100 { font-weight: var(--font-weight-ultralight); }
.fw-thin, .fw-200       { font-weight: var(--font-weight-thin); }
.fw-light, .fw-300      { font-weight: var(--font-weight-light); }
.fw-regular, .fw-400    { font-weight: var(--font-weight-regular); }
.fw-medium, .fw-500     { font-weight: var(--font-weight-medium); }
.fw-semibold, .fw-600   { font-weight: var(--font-weight-semibold); }
.fw-bold, .fw-700       { font-weight: var(--font-weight-bold); }
.fw-heavy, .fw-800      { font-weight: var(--font-weight-heavy); }
.fw-black, .fw-900      { font-weight: var(--font-weight-black); }

/* Text styling modifiers */
strong, b, .bold { font-weight: var(--font-weight-bold); }
em, i, .italic { font-style: italic; }
u, .underline { text-decoration: underline; }
s, .strikethrough { text-decoration: line-through; }

/* Color modifiers (text and bg options) */
.primary { color: var(--color-primary); }
.primary-inverted { color: var(--color-primary-inverted); }
.secondary { color: var(--color-secondary); }

/* SwiftUI Color text modifiers */

/* SwiftUI Color text modifiers */
.black { color: var(--color-black); }
.blue { color: var(--color-blue); }
.brown { color: var(--color-brown); }
.cyan { color: var(--color-cyan); }
.gray { color: var(--color-gray); }
.green { color: var(--color-green); }
.indigo { color: var(--color-indigo); }
.mint { color: var(--color-mint); }
.orange { color: var(--color-orange); }
.pink { color: var(--color-pink); }
.purple { color: var(--color-purple); }
.red { color: var(--color-red); }
.teal { color: var(--color-teal); }
.white { color: var(--color-white); }
.yellow { color: var(--color-yellow); }
.clear { color: var(--color-clear); }

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

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

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

/* SwiftUI Color background modifiers */
.bg-black { background-color: var(--color-black); }
.bg-blue { background-color: var(--color-blue); }
.bg-brown { background-color: var(--color-brown); }
.bg-cyan { background-color: var(--color-cyan); }
.bg-gray { background-color: var(--color-gray); }
.bg-green { background-color: var(--color-green); }
.bg-indigo { background-color: var(--color-indigo); }
.bg-mint { background-color: var(--color-mint); }
.bg-orange { background-color: var(--color-orange); }
.bg-pink { background-color: var(--color-pink); }
.bg-purple { background-color: var(--color-purple); }
.bg-red { background-color: var(--color-red); }
.bg-teal { background-color: var(--color-teal); }
.bg-white { background-color: var(--color-white); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-clear { background-color: var(--color-clear); }
.bg--placeholder {
  background-size: 10px 10px;
  background-image: linear-gradient(45deg, var(--placeholder-color, var(--color-separator)) 7.14%, transparent 7.14%, transparent 50%, var(--placeholder-color, var(--color-separator)) 50%, var(--placeholder-color, var(--color-separator)) 57.14%, transparent 57.14%, transparent);
  border: 1px dashed var(--placeholder-color, var(--color-separator));
  background-color: transparent;
}

/* Background color variants that set the placeholder color */
.bg-black.bg--placeholder { --placeholder-color: var(--color-black); }
.bg-blue.bg--placeholder { --placeholder-color: var(--color-blue); }
.bg-brown.bg--placeholder { --placeholder-color: var(--color-brown); }
.bg-cyan.bg--placeholder { --placeholder-color: var(--color-cyan); }
.bg-gray.bg--placeholder { --placeholder-color: var(--color-gray); }
.bg-green.bg--placeholder { --placeholder-color: var(--color-green); }
.bg-indigo.bg--placeholder { --placeholder-color: var(--color-indigo); }
.bg-mint.bg--placeholder { --placeholder-color: var(--color-mint); }
.bg-orange.bg--placeholder { --placeholder-color: var(--color-orange); }
.bg-pink.bg--placeholder { --placeholder-color: var(--color-pink); }
.bg-purple.bg--placeholder { --placeholder-color: var(--color-purple); }
.bg-red.bg--placeholder { --placeholder-color: var(--color-red); }
.bg-teal.bg--placeholder { --placeholder-color: var(--color-teal); }
.bg-white.bg--placeholder { --placeholder-color: var(--color-white); }
.bg-yellow.bg--placeholder { --placeholder-color: var(--color-yellow); }

/* SwiftUI Color border modifiers */
.border-none { border: none; }
.border { border: 1px solid var(--color-separator); }
.border-black { border: 1px solid var(--color-black); }
.border-blue { border: 1px solid var(--color-blue); }
.border-brown { border: 1px solid var(--color-brown); }
.border-cyan { border: 1px solid var(--color-cyan); }
.border-gray { border: 1px solid var(--color-gray); }
.border-green { border: 1px solid var(--color-green); }
.border-indigo { border: 1px solid var(--color-indigo); }
.border-mint { border: 1px solid var(--color-mint); }
.border-orange { border: 1px solid var(--color-orange); }
.border-pink { border: 1px solid var(--color-pink); }
.border-purple { border: 1px solid var(--color-purple); }
.border-red { border: 1px solid var(--color-red); }
.border-teal { border: 1px solid var(--color-teal); }
.border-white { border: 1px solid var(--color-white); }
.border-yellow { border: 1px solid var(--color-yellow); }
.border--dashed { border-style: dashed; border-width: 2px; }

/* Frame (size) modifiers */
.frame { display: inline-block; }
.frame.width-100 { width: 100px; }
.frame.height-100 { height: 100px; }
.frame.full-width { width: 100%; }
.frame.full-height { height: 100%; }

/* Padding & Margin utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 2rem; }

.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 2rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 1rem; }
.pl-4 { padding-left: 1.5rem; }
.pl-5 { padding-left: 2rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 1rem; }
.pr-4 { padding-right: 1.5rem; }
.pr-5 { padding-right: 2rem; }

.pv-0 { padding-top: 0; padding-bottom: 0; }
.pv-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.pv-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pv-3 { padding-top: 1rem; padding-bottom: 1rem; }
.pv-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pv-5 { padding-top: 2rem; padding-bottom: 2rem; }

.ph-0 { padding-left: 0; padding-right: 0; }
.ph-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.ph-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.ph-3 { padding-left: 1rem; padding-right: 1rem; }
.ph-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.ph-5 { padding-left: 2rem; padding-right: 2rem; }

.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 1rem; }
.ml-4 { margin-left: 1.5rem; }
.ml-5 { margin-left: 2rem; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 1rem; }
.mr-4 { margin-right: 1.5rem; }
.mr-5 { margin-right: 2rem; }

.mv-0 { margin-top: 0; margin-bottom: 0; }
.mv-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.mv-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.mv-3 { margin-top: 1rem; margin-bottom: 1rem; }
.mv-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mv-5 { margin-top: 2rem; margin-bottom: 2rem; }

.mh-0 { margin-left: 0; margin-right: 0; }
.mh-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mh-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mh-3 { margin-left: 1rem; margin-right: 1rem; }
.mh-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mh-5 { margin-left: 2rem; margin-right: 2rem; }

/* Corner Radius */
.rounded-0 { border-radius: 0; }
.rounded { border-radius: 0.5rem; }
.rounded-sm { border-radius: 0.25rem; }
.rounded-lg { border-radius: 1rem; }

/* ===== Dark Mode Utilities ===== */
/* Manual dark mode toggle class */
.dark-mode {
  background-color: var(--color-background);
  color: var(--color-primary);
}

/* Dracula theme utilities */
.dracula-theme {
  background-color: var(--color-background);
  color: var(--color-primary);
}

/* Ensure body and html inherit themes */
.dark-mode body,
.dark-mode html,
.dracula-theme body,
.dracula-theme html {
  background-color: var(--color-background);
  color: var(--color-primary);
}

/* Smooth transitions for theme switching */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}


table {
  border-collapse: collapse;
  /* margin: 1.5rem 0; */
  border-radius: 0.5rem;
  width: 100%;
  white-space: nowrap;
  min-width: max-content;
}

/* Table container for horizontal scrolling */
.table-container {
  overflow-x: auto;
  /* border-radius: 0.5rem; */
  /* border: 1px solid var(--color-separator); */
}

figure>table {
  width: max-content;
  margin: 0
}

td,th {
  border: 1px solid var(--color-separator);
  text-align: start;
  padding: .5rem
}

th {
  background-color: var(--color-grouped-primary);
  font-weight: 700
}

tr:nth-child(2n) {
  background-color: var(--color-grouped-primary);
}

table caption {
  margin-bottom: .5rem;
  font-weight: 700
}

/* ===== Basic Input Styles ===== */

/* Base input styles */
input, textarea, select {
  font-family: inherit;
  font-size: var(--font-size-body);
  color: var(--color-primary);
  background-color: var(--color-background);
  border: 1px solid var(--color-separator);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 2.75rem;
  box-sizing: border-box;
  width: 100%;
}

/* Focus states */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-blue);
}

/* Placeholder styles */
input::placeholder, textarea::placeholder {
  color: var(--color-secondary);
  opacity: 1;
}

/* Disabled states */
input:disabled, textarea:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}

/* Textarea specific */
textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.4;
}

/* Select specific */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: 2.5rem;
  appearance: none;
}

/* Checkbox and radio specific */
input[type="checkbox"], input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: auto;
  margin: 0;
  cursor: pointer;
}

input[type="radio"] {
  border-radius: 50%;
}

/* Label styles */
label {
  display: block;
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

/* Fieldset and legend */
fieldset {
  border: 1px solid var(--color-separator);
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0;
}

legend {
  font-size: var(--font-size-subhead);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  padding: 0 0.5rem;
}

/* ===== Basic Button Styles ===== */

/* Base button styles */
button {
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  background-color: var(--color-blue);
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 2.75rem;
  box-sizing: border-box;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Button hover state */
button:hover {
  background-color: var(--color-blue);
  opacity: 0.9;
}

/* Button active/pressed state */
button:active {
  transform: translateY(1px);
}

/* Button focus state */
button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

/* Disabled button state */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-background-secondary);
}

button:disabled:hover {
  background-color: var(--color-background-secondary);
  transform: none;
}

/* Button sizes */
.btn-small {
  font-size: var(--font-size-footnote);
  padding: 0.5rem 0.75rem;
  min-height: 2rem;
}

.btn-large {
  font-size: var(--font-size-headline);
  padding: 1rem 1.5rem;
  min-height: 3.25rem;
}