/**
 * DrawGestures — Web component styles (ds-web.css)
 *
 * Blade port of the design-system TSX components (resources/views/design-system/).
 * Consumes ONLY the custom properties defined in css/design-system.css, plus the
 * small set of derived (non-palette) helpers declared below.
 *
 * Load order: design-system.css FIRST, then this file.
 */

:root {
  /* Charcoal theme fonts — Josefin Sans (headlines) + Kanit (body/UI).
     Overrides the legacy Poppins/Inter defaults for pages using this sheet. */
  --font-brand: 'Josefin Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-plain: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Derived glass-morphism surfaces (mixed from existing palette vars) */
  --ds-glass-surface: color-mix(in srgb, var(--color-charcoal-black) 85%, transparent);
  --ds-glass-elevated: color-mix(in srgb, var(--color-charcoal-dark) 80%, transparent);
  --ds-glass-hover: color-mix(in srgb, var(--color-neutral-white) 8%, transparent);
  --ds-glass-pressed: color-mix(in srgb, var(--color-neutral-white) 12%, transparent);
  --ds-glass-border: color-mix(in srgb, var(--color-neutral-white) 10%, transparent);

  /* Derived shadows (elevation + coral glow) */
  --ds-shadow-glow: 0 0 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
  --ds-shadow-glow-strong: 0 0 24px color-mix(in srgb, var(--color-primary) 55%, transparent);
  --ds-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--color-neutral-white) 8%, transparent);
  --ds-shadow-glass-hover: 0 12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, var(--color-neutral-white) 12%, transparent);
  --ds-shadow-card-md: 0 4px 8px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.28);
  --ds-shadow-card-lg: 0 8px 24px rgba(0, 0, 0, 0.40), 0 4px 8px rgba(0, 0, 0, 0.32);

  /* Non-palette sizes missing from design-system.css */
  --ds-text-lg: 1.125rem;   /* 18px */
  --ds-text-xl: 1.25rem;    /* 20px */
  --ds-space-2xl: 4rem;     /* 64px */
  --ds-content-max: 90rem;  /* 1440px */
  --ds-topbar-height: 4rem; /* 64px */

  /* Interaction outline (stronger border on hover) */
  --ds-outline-strong: var(--color-charcoal-soft);
}

/* =================================================================
 * PAGE SHELL
 * ================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }

.ds-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-plain);
}

.ds-page main {
  flex: 1;
}

/* =================================================================
 * BUTTON — mirrors components/Button/Button.tsx
 * ================================================================= */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-plain);
  font-weight: 500;
  line-height: 1;
  border: var(--border-thin) solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition-normal);
}

.ds-btn:hover { text-decoration: none; }

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

.ds-btn:active { transform: scale(0.98); }

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.ds-btn--sm {
  height: 2.25rem;
  padding: 0 var(--space-normal);
  font-size: var(--text-body-small);
  border-radius: var(--radius-button);
}

.ds-btn--md {
  height: var(--size-button-height);
  padding: 0 var(--space-lg);
  font-size: var(--text-body-medium);
  border-radius: var(--radius-button-large);
}

.ds-btn--lg {
  height: 3.5rem;
  padding: 0 var(--space-xl);
  font-size: var(--text-body-large);
  border-radius: var(--radius-button-large);
}

/* Variants */
.ds-btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

.ds-btn--primary:hover {
  background-color: var(--color-accent-primary-base);
  color: var(--color-on-primary);
  box-shadow: var(--ds-shadow-glow);
}

.ds-btn--secondary {
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface);
  border-color: var(--color-outline);
}

.ds-btn--secondary:hover {
  background-color: var(--color-charcoal-light);
  border-color: var(--ds-outline-strong);
  color: var(--color-on-surface);
}

.ds-btn--secondary:active { background-color: var(--color-charcoal-soft); }

.ds-btn--ghost {
  background-color: transparent;
  color: var(--color-on-surface);
}

.ds-btn--ghost:hover {
  background-color: var(--ds-glass-hover);
  color: var(--color-on-surface);
}

.ds-btn--ghost:active { background-color: var(--ds-glass-pressed); }

.ds-btn--danger {
  background-color: var(--color-error-base);
  color: var(--color-neutral-white);
}

.ds-btn--danger:hover {
  background-color: var(--color-error-dark);
  color: var(--color-neutral-white);
}

.ds-btn--premium {
  background-color: var(--color-premium-base);
  color: var(--color-charcoal-black);
  font-weight: 700;
}

.ds-btn--premium:hover {
  background-color: var(--color-premium-light);
  color: var(--color-charcoal-black);
}

.ds-btn--full { width: 100%; }

/* =================================================================
 * CARD — mirrors components/Card/Card.tsx
 * ================================================================= */
.ds-card {
  border-radius: var(--radius-card);
  transition: all var(--transition-normal);
}

.ds-card--glass {
  background-color: var(--ds-glass-surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: var(--border-thin) solid var(--ds-glass-border);
  box-shadow: var(--ds-shadow-glass);
}

.ds-card--elevated {
  background-color: var(--color-charcoal-dark);
  border: var(--border-thin) solid var(--color-outline);
  box-shadow: var(--ds-shadow-card-md);
}

.ds-card--solid {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-outline);
}

.ds-card--outlined {
  background-color: transparent;
  border: var(--border-thin) solid var(--ds-outline-strong);
}

/* Padding */
.ds-card--pad-none { padding: 0; }
.ds-card--pad-sm { padding: var(--space-normal); }
.ds-card--pad-md { padding: var(--space-md); }
.ds-card--pad-lg { padding: var(--space-lg); }

/* Hoverable lift */
.ds-card--hover:hover { transform: translateY(-2px); }
.ds-card--hover.ds-card--glass:hover { box-shadow: var(--ds-shadow-glass-hover); }
.ds-card--hover.ds-card--elevated:hover { box-shadow: var(--ds-shadow-card-lg); background-color: var(--color-charcoal-medium); }
.ds-card--hover.ds-card--solid:hover { box-shadow: var(--ds-shadow-card-md); border-color: var(--ds-outline-strong); }
.ds-card--hover.ds-card--outlined:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }

.ds-card--clickable { cursor: pointer; user-select: none; }

/* =================================================================
 * HEADING — mirrors components/Heading/Heading.tsx (Josefin Sans)
 * ================================================================= */
.ds-heading {
  font-family: var(--font-brand);
  margin: 0;
  color: var(--color-neutral-white);
}

.ds-heading--display { font-size: var(--text-display-large);  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.ds-heading--xl      { font-size: var(--text-display-medium); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ds-heading--lg      { font-size: var(--text-headline-large); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ds-heading--md      { font-size: var(--text-headline-medium); font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; }
.ds-heading--sm      { font-size: var(--text-headline-small); font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; }
.ds-heading--xs      { font-size: var(--text-title-large);    font-weight: 500; letter-spacing: 0;       line-height: 1.4; }

.ds-heading--muted   { color: var(--color-neutral-ash); }
.ds-heading--accent  { color: var(--color-accent-primary-soft); }
.ds-heading--premium { color: var(--color-premium-light); }

.ds-heading--gradient {
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent-primary-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =================================================================
 * TEXT — mirrors components/Text/Text.tsx (Kanit)
 * ================================================================= */
.ds-text {
  font-family: var(--font-plain);
  line-height: 1.5;
  margin: 0;
  color: var(--color-on-surface);
}

.ds-text--xs   { font-size: var(--text-label-small); }
.ds-text--sm   { font-size: var(--text-body-small); }
.ds-text--md   { font-size: var(--text-body-medium); }
.ds-text--base { font-size: var(--text-body-large); }
.ds-text--lg   { font-size: var(--ds-text-lg); }
.ds-text--xl   { font-size: var(--ds-text-xl); }

.ds-text--muted   { color: var(--color-neutral-ash); }
.ds-text--subtle  { color: var(--color-neutral-smoke); }
.ds-text--accent  { color: var(--color-accent-primary-soft); }
.ds-text--success { color: var(--color-success-light); }
.ds-text--warning { color: var(--color-warning-light); }
.ds-text--error   { color: var(--color-error-light); }
.ds-text--premium { color: var(--color-premium-light); }

.ds-text--w-regular  { font-weight: 400; }
.ds-text--w-medium   { font-weight: 500; }
.ds-text--w-semibold { font-weight: 600; }
.ds-text--w-bold     { font-weight: 700; }

.ds-text--mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-variant-numeric: tabular-nums;
}

/* =================================================================
 * CHIP — mirrors components/Chip/Chip.tsx (static/link chip)
 * ================================================================= */
.ds-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: var(--border-thin) solid;
  font-family: var(--font-plain);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.ds-chip--sm { height: 1.5rem; padding: 0 var(--space-sm); font-size: var(--text-label-small); gap: 0.125rem; }
.ds-chip--md { height: 2rem;   padding: 0 var(--space-normal); font-size: var(--text-body-small); gap: var(--space-xs); }

.ds-chip--default {
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface-variant);
  border-color: var(--color-outline);
}

.ds-chip--accent {
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-accent-primary-soft);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.ds-chip--success {
  background-color: color-mix(in srgb, var(--color-success-base) 15%, transparent);
  color: var(--color-success-light);
  border-color: color-mix(in srgb, var(--color-success-base) 30%, transparent);
}

.ds-chip--warning {
  background-color: color-mix(in srgb, var(--color-warning-base) 15%, transparent);
  color: var(--color-warning-light);
  border-color: color-mix(in srgb, var(--color-warning-base) 30%, transparent);
}

.ds-chip--error {
  background-color: color-mix(in srgb, var(--color-error-base) 15%, transparent);
  color: var(--color-error-light);
  border-color: color-mix(in srgb, var(--color-error-base) 30%, transparent);
}

.ds-chip--premium {
  background-color: color-mix(in srgb, var(--color-premium-base) 15%, transparent);
  color: var(--color-premium-light);
  border-color: color-mix(in srgb, var(--color-premium-base) 30%, transparent);
}

/* Selected (filled) state */
.ds-chip--selected.ds-chip--default { background-color: var(--color-charcoal-light); color: var(--color-neutral-white); border-color: var(--ds-outline-strong); }
.ds-chip--selected.ds-chip--accent  { background-color: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-accent-primary-dark); }
.ds-chip--selected.ds-chip--success { background-color: var(--color-success-base); color: var(--color-neutral-white); border-color: var(--color-success-dark); }
.ds-chip--selected.ds-chip--warning { background-color: var(--color-warning-base); color: var(--color-charcoal-black); border-color: var(--color-warning-dark); }
.ds-chip--selected.ds-chip--error   { background-color: var(--color-error-base); color: var(--color-neutral-white); border-color: var(--color-error-dark); }
.ds-chip--selected.ds-chip--premium { background-color: var(--color-premium-base); color: var(--color-charcoal-black); border-color: var(--color-premium-dark); }

/* =================================================================
 * BADGE — mirrors components/Badge/Badge.tsx
 * ================================================================= */
.ds-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-plain);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-badge);
}

.ds-badge--sm { font-size: var(--text-label-small); padding: 0.125rem var(--space-xs); }
.ds-badge--md { font-size: var(--text-body-small);  padding: 0.25rem var(--space-sm); }

.ds-badge--default { background-color: var(--color-charcoal-light); color: var(--color-neutral-silver); }
.ds-badge--accent  { background-color: var(--color-primary); color: var(--color-on-primary); }
.ds-badge--success { background-color: var(--color-success-dark); color: var(--color-success-light); }
.ds-badge--warning { background-color: color-mix(in srgb, var(--color-warning-base) 20%, transparent); color: var(--color-warning-light); }
.ds-badge--error   { background-color: var(--color-error-base); color: var(--color-neutral-white); }
.ds-badge--premium { background-color: color-mix(in srgb, var(--color-premium-base) 20%, transparent); color: var(--color-premium-light); }

.ds-badge--dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: var(--radius-full);
}

/* =================================================================
 * FORM FIELD (Input + Select) — mirrors Input.tsx / Select.tsx
 * ================================================================= */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
}

.ds-field__label {
  font-family: var(--font-plain);
  font-size: var(--text-body-small);
  font-weight: 500;
  color: var(--color-neutral-ash);
}

.ds-field--error .ds-field__label { color: var(--color-error-light); }

.ds-input {
  height: var(--size-button-height);
  width: 100%;
  padding: 0 var(--space-normal);
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface);
  font-family: var(--font-plain);
  font-size: var(--text-body-large);
  border: var(--border-thin) solid var(--color-outline);
  border-radius: var(--radius-button-large);
  outline: none;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.ds-input::placeholder { color: var(--color-neutral-smoke); }

.ds-input:hover { border-color: var(--ds-outline-strong); }

.ds-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.ds-input:disabled { opacity: 0.4; cursor: not-allowed; }

.ds-field--error .ds-input { border-color: var(--color-error-base); }

select.ds-input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* chevron-down, currentColor-ish stroke */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ADADAD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-normal) center;
  padding-right: calc(var(--space-normal) * 2 + 1rem);
}

select.ds-input option {
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface);
}

.ds-field__hint {
  font-family: var(--font-plain);
  font-size: var(--text-body-small);
  color: var(--color-neutral-smoke);
  margin: 0;
}

.ds-field__error {
  font-family: var(--font-plain);
  font-size: var(--text-body-small);
  color: var(--color-error-light);
  margin: 0;
}

/* =================================================================
 * STAT CARD — mirrors components/StatCard/StatCard.tsx
 * ================================================================= */
.ds-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
}

.ds-stat-card__icon {
  color: var(--color-primary);
  flex-shrink: 0;
  display: inline-flex;
}

.ds-stat-card__label {
  font-family: var(--font-brand);
  font-size: var(--text-label-small);
  font-weight: 700;
  color: var(--color-neutral-ash);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ds-stat-card__value {
  font-family: var(--font-brand);
  font-size: var(--text-headline-small);
  font-weight: 700;
  color: var(--color-neutral-white);
  line-height: 1;
}

/* =================================================================
 * LAYOUT — Container / Section / Grid (layouts/*.tsx)
 * ================================================================= */
.ds-container {
  width: 100%;
  max-width: var(--ds-content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.ds-container--flush { padding-left: 0; padding-right: 0; }

@media (min-width: 768px) {
  .ds-container { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .ds-container--flush { padding-left: 0; padding-right: 0; }
}

@media (min-width: 1024px) {
  .ds-container { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .ds-container--flush { padding-left: 0; padding-right: 0; }
}

.ds-section--sm { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.ds-section--md { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.ds-section--lg { padding-top: var(--ds-space-2xl); padding-bottom: var(--ds-space-2xl); }
.ds-section--xl { padding-top: 7rem; padding-bottom: 7rem; }

.ds-grid { display: grid; }

.ds-grid--gap-sm { gap: var(--space-normal); }
.ds-grid--gap-md { gap: var(--space-lg); }
.ds-grid--gap-lg { gap: var(--space-xl); }

/* Mobile (default) */
.ds-grid--m1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ds-grid--m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Tablet */
@media (min-width: 768px) {
  .ds-grid--t1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .ds-grid--t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid--t3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-grid--t4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Desktop */
@media (min-width: 1024px) {
  .ds-grid--d1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .ds-grid--d2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid--d3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-grid--d4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ds-grid--d6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ds-grid--d12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* =================================================================
 * NAVBAR — floating glass pill ("Home B Bold" chrome)
 * ================================================================= */
.ds-navbar {
  position: sticky;
  top: var(--space-md);
  z-index: var(--z-sticky);
}

.ds-navbar__inner {
  max-width: 61.25rem; /* 980px */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 3.75rem;
  padding: 0 var(--space-normal) 0 calc(var(--space-md) + var(--space-xs));
  background-color: color-mix(in srgb, var(--color-charcoal-black) 85%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: var(--border-thin) solid var(--ds-glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--ds-shadow-glass);
}

.ds-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.ds-navbar__brand img {
  height: 1.875rem;
  width: 1.875rem;
  display: block;
  border-radius: 0.5625rem; /* 9px, per design brand-mark chip */
  background-color: var(--color-charcoal-medium);
  border: var(--border-thin) solid color-mix(in srgb, var(--color-neutral-white) 22%, transparent);
}

.ds-navbar__wordmark {
  font-family: var(--font-brand);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-neutral-white);
  line-height: 1;
}

.ds-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-navbar__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-normal);
  border-radius: var(--radius-full);
  font-family: var(--font-plain);
  font-size: var(--text-body-medium);
  font-weight: 500;
  color: var(--color-neutral-ash);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.ds-navbar__link:hover {
  color: var(--color-neutral-white);
  background-color: var(--ds-glass-hover);
  text-decoration: none;
}

.ds-navbar__link--active {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

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

.ds-navbar .ds-btn { border-radius: var(--radius-full); }

/* Hamburger (checkbox technique) */
.ds-navbar__toggle-input { display: none; }

.ds-navbar__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-background);
  height: var(--size-icon-background);
  border-radius: var(--radius-button);
  color: var(--color-neutral-ash);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ds-navbar__toggle:hover {
  color: var(--color-neutral-white);
  background-color: var(--ds-glass-hover);
}

.ds-navbar__toggle svg { width: var(--size-icon-normal); height: var(--size-icon-normal); }

.ds-navbar__toggle .ds-navbar__icon-close { display: none; }

.ds-navbar__mobile {
  display: none;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-sm) var(--space-md) 0;
  padding: var(--space-normal);
  background-color: color-mix(in srgb, var(--color-charcoal-black) 92%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: var(--border-thin) solid var(--ds-glass-border);
  border-radius: var(--radius-asymmetric);
  box-shadow: var(--ds-shadow-glass);
}

.ds-navbar__mobile .ds-navbar__link { display: flex; }

@media (max-width: 767px) {
  .ds-navbar__links, .ds-navbar__cta--desktop { display: none; }
  .ds-navbar__toggle { display: inline-flex; }

  .ds-navbar__toggle-input:checked ~ .ds-navbar__mobile { display: flex; }
  .ds-navbar__toggle-input:checked ~ .ds-container .ds-navbar__toggle .ds-navbar__icon-open { display: none; }
  .ds-navbar__toggle-input:checked ~ .ds-container .ds-navbar__toggle .ds-navbar__icon-close { display: block; }
}

/* =================================================================
 * FOOTER
 * ================================================================= */
.ds-footer {
  background-color: var(--color-background);
  border-top: var(--border-thin) solid var(--ds-glass-border);
  padding: var(--ds-space-2xl) 0 var(--space-lg);
  margin-top: auto;
}

.ds-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xl);
}

.ds-footer__brand { max-width: 20rem; }

.ds-footer__wordmark {
  font-family: var(--font-brand);
  font-size: var(--ds-text-xl);
  font-weight: 700;
  color: var(--color-neutral-white);
  margin: 0 0 var(--space-sm);
}

.ds-footer__tagline {
  font-family: var(--font-plain);
  font-size: var(--text-body-medium);
  color: var(--color-neutral-ash);
  margin: 0;
}

.ds-footer__heading {
  font-family: var(--font-brand);
  font-size: var(--text-body-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-smoke);
  margin: 0 0 var(--space-normal);
}

.ds-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ds-footer__links a {
  font-family: var(--font-plain);
  font-size: var(--text-body-medium);
  color: var(--color-neutral-ash);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

.ds-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.ds-footer__badges img {
  height: 2.5rem;
  width: auto;
  display: block;
}

.ds-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--border-thin) solid var(--color-outline-variant);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.ds-footer__copyright {
  font-family: var(--font-plain);
  font-size: var(--text-body-small);
  color: var(--color-neutral-ash);
  margin: 0;
}