:root {
  color-scheme: light;

  --fz-font-sans:
    "Manrope Variable", "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Readable product type scale. Never render operational UI below 12px. */
  --fz-font-caption: 0.75rem;
  --fz-font-small: 0.8125rem;
  --fz-font-body: 0.875rem;
  --fz-font-control: 0.9375rem;
  --fz-font-section-title: 1rem;

  /* Canonical turquoise scale derived from the original #0f6c7a foundation. */
  --fz-teal-50: #f3f9fa;
  --fz-teal-100: #e5f3f4;
  --fz-teal-200: #bee1e5;
  --fz-teal-300: #8fcbd2;
  --fz-teal-400: #55c0cc;
  --fz-teal-500: #2b8e9b;
  --fz-teal-600: #0f6c7a;
  --fz-teal-700: #0b5662;
  --fz-teal-800: #094651;
  --fz-teal-900: #07343c;

  --fz-coral-50: #fff4ef;
  --fz-coral-100: #ffe3d8;
  --fz-coral-200: #ffc8b2;
  --fz-coral-300: #ffa37f;
  --fz-coral-400: #ff8a5b;
  --fz-coral-500: #ff8a5b;
  --fz-coral-600: #e66f43;

  --fz-ink-950: #172b33;
  --fz-ink-900: #203740;
  --fz-ink-800: #2c444d;
  --fz-ink-700: #3d535b;
  --fz-ink-600: #53666e;
  --fz-ink-500: #6f8087;
  --fz-ink-400: #92a0a5;
  --fz-ink-300: #b5c0c3;
  --fz-ink-200: #d1dadd;
  --fz-ink-100: #e6ecee;
  --fz-ink-50: #f3f7f8;

  --fz-success: #16855b;
  --fz-success-soft: #e7f6ef;
  --fz-warning: #b45309;
  --fz-warning-soft: #fff4db;
  --fz-danger: #c2413d;
  --fz-danger-soft: #fdecec;
  --fz-info: #2563eb;
  --fz-info-soft: #eaf1ff;

  --fz-bg: #f3f7f8;
  --fz-bg-soft: #e5f3f4;
  --fz-bg-deep: #dcebed;
  --fz-surface: #ffffff;
  --fz-surface-raised: rgba(255, 255, 255, 0.9);
  --fz-surface-muted: #f3f7f8;
  --fz-surface-strong: rgba(255, 255, 255, 0.9);
  --fz-text: #172b33;
  --fz-text-soft: #53666e;
  --fz-text-muted: #53666e;
  --fz-border: rgba(23, 43, 51, 0.12);
  --fz-border-strong: rgba(23, 43, 51, 0.22);
  --fz-highlight: rgba(255, 255, 255, 0.88);
  --fz-focus: rgba(15, 108, 122, 0.38);
  --fz-primary: #0f6c7a;
  --fz-primary-hover: #0b5662;
  --fz-primary-soft: #e5f3f4;
  --fz-primary-text: #f3f7f8;
  --fz-primary-shadow: rgba(11, 59, 68, 0.18);
  --fz-accent: #ff8a5b;
  --fz-accent-hover: #e66f43;
  --fz-accent-soft: #fff4ef;
  --fz-grid: rgba(15, 108, 122, 0.08);

  --fz-glass-bg: rgba(255, 255, 255, 0.72);
  --fz-glass-border: var(--fz-highlight);
  --fz-glass-highlight: inset 0 1px 0 var(--fz-highlight);

  --fz-radius-sm: 8px;
  --fz-radius-md: 11px;
  --fz-radius-lg: 16px;
  --fz-radius-xl: 22px;
  --fz-radius-pill: 999px;

  --fz-shadow-sm: 0 1px 2px rgba(11, 59, 68, 0.05), 0 6px 18px rgba(11, 59, 68, 0.06);
  --fz-shadow-md: 0 18px 42px rgba(11, 59, 68, 0.13);
  --fz-shadow-glass: 0 24px 60px rgba(11, 59, 68, 0.13);

  --fz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fz-duration-fast: 140ms;
  --fz-duration: 220ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --fz-coral-400: #ff9b79;
  --fz-coral-500: #ff9b79;
  --fz-bg: #07171c;
  --fz-bg-soft: #153d44;
  --fz-bg-deep: #102d35;
  --fz-surface: #10252c;
  --fz-surface-raised: rgba(16, 37, 44, 0.9);
  --fz-surface-muted: #153038;
  --fz-surface-strong: rgba(16, 37, 44, 0.9);
  --fz-text: #ecf5f6;
  --fz-text-soft: #a9bdc2;
  --fz-text-muted: #a9bdc2;
  --fz-border: rgba(236, 245, 246, 0.13);
  --fz-border-strong: rgba(236, 245, 246, 0.24);
  --fz-highlight: rgba(236, 245, 246, 0.16);
  --fz-focus: rgba(85, 192, 204, 0.46);
  --fz-primary: #55c0cc;
  --fz-primary-hover: #75d0d8;
  --fz-primary-soft: #153d44;
  --fz-primary-text: #07171c;
  --fz-primary-shadow: rgba(0, 0, 0, 0.28);
  --fz-accent: #ff9b79;
  --fz-accent-hover: #ffb096;
  --fz-accent-soft: #432425;
  --fz-success: #49b98a;
  --fz-success-soft: #123c31;
  --fz-warning: #f2b35f;
  --fz-warning-soft: #3b2d17;
  --fz-danger: #f27b77;
  --fz-danger-soft: #432425;
  --fz-info: #7eafff;
  --fz-info-soft: #172f57;
  --fz-grid: rgba(85, 192, 204, 0.09);

  --fz-glass-bg: rgba(15, 36, 43, 0.68);
  --fz-glass-border: var(--fz-highlight);
  --fz-glass-highlight: inset 0 1px 0 var(--fz-highlight);

  --fz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(0, 0, 0, 0.16);
  --fz-shadow-md: 0 20px 48px rgba(0, 0, 0, 0.3);
  --fz-shadow-glass: 0 28px 80px rgba(0, 0, 0, 0.34);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --fz-coral-400: #ff9b79;
    --fz-coral-500: #ff9b79;
    --fz-bg: #07171c;
    --fz-bg-soft: #153d44;
    --fz-bg-deep: #102d35;
    --fz-surface: #10252c;
    --fz-surface-raised: rgba(16, 37, 44, 0.9);
    --fz-surface-muted: #153038;
    --fz-surface-strong: rgba(16, 37, 44, 0.9);
    --fz-text: #ecf5f6;
    --fz-text-soft: #a9bdc2;
    --fz-text-muted: #a9bdc2;
    --fz-border: rgba(236, 245, 246, 0.13);
    --fz-border-strong: rgba(236, 245, 246, 0.24);
    --fz-highlight: rgba(236, 245, 246, 0.16);
    --fz-focus: rgba(85, 192, 204, 0.46);
    --fz-primary: #55c0cc;
    --fz-primary-hover: #75d0d8;
    --fz-primary-soft: #153d44;
    --fz-primary-text: #07171c;
    --fz-primary-shadow: rgba(0, 0, 0, 0.28);
    --fz-accent: #ff9b79;
    --fz-accent-hover: #ffb096;
    --fz-accent-soft: #432425;
    --fz-success: #49b98a;
    --fz-success-soft: #123c31;
    --fz-warning: #f2b35f;
    --fz-warning-soft: #3b2d17;
    --fz-danger: #f27b77;
    --fz-danger-soft: #432425;
    --fz-info: #7eafff;
    --fz-info-soft: #172f57;
    --fz-grid: rgba(85, 192, 204, 0.09);
    --fz-glass-bg: rgba(15, 36, 43, 0.68);
    --fz-glass-border: var(--fz-highlight);
    --fz-glass-highlight: inset 0 1px 0 var(--fz-highlight);
    --fz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(0, 0, 0, 0.16);
    --fz-shadow-md: 0 20px 48px rgba(0, 0, 0, 0.3);
    --fz-shadow-glass: 0 28px 80px rgba(0, 0, 0, 0.34);
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--fz-bg);
  color: var(--fz-text);
  font-family: var(--fz-font-sans);
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--fz-focus);
  outline-offset: 3px;
}

.fz-glass {
  background: var(--fz-glass-bg);
  border: 1px solid var(--fz-glass-border);
  box-shadow: var(--fz-glass-highlight), var(--fz-shadow-glass);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.fz-brand {
  display: inline-flex;
  align-items: center;
  color: #146d7a;
}

.fz-brand--inverse {
  color: #fff;
}

[data-theme="dark"] .fz-brand:not(.fz-brand--inverse) {
  color: #fff;
}

.fz-brand > svg {
  display: block;
  width: 124px;
  height: auto;
}

.fz-brand--compact > svg {
  width: 34px;
  height: 34px;
}

.fz-theme-switch {
  display: inline-flex;
  padding: 4px;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--fz-highlight);
  border-radius: var(--fz-radius-pill);
  background: var(--fz-glass-bg);
  box-shadow:
    var(--fz-glass-highlight),
    0 10px 26px var(--fz-primary-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.fz-theme-switch button {
  display: inline-flex;
  min-height: 34px;
  padding: 7px 12px;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: var(--fz-radius-pill);
  background: transparent;
  color: var(--fz-text-soft);
  cursor: pointer;
  transition:
    background var(--fz-duration-fast) ease,
    color var(--fz-duration-fast) ease,
    transform var(--fz-duration-fast) ease;
}

.fz-theme-switch button:hover {
  color: var(--fz-primary);
  transform: translateY(-1px);
}

.fz-theme-switch button[aria-pressed="true"] {
  background: var(--fz-primary);
  color: var(--fz-primary-text);
  box-shadow: 0 5px 14px var(--fz-primary-shadow);
}

.fz-theme-switch span {
  font-size: 12px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}