@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --tn-font-sans: "Geist", "Manrope", "Segoe UI", system-ui, sans-serif;
  --tn-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  --tn-bg: #f7f3ec;
  --tn-bg-soft: #fffaf2;
  --tn-surface: rgba(255, 252, 246, 0.92);
  --tn-surface-strong: #fffaf2;
  --tn-ink: #101820;
  --tn-muted: #657180;
  --tn-border: rgba(37, 48, 61, 0.13);

  --tn-accent: #e86f4a;
  --tn-accent-strong: #cf5635;
  --tn-teal: #2f6f73;
  --tn-mint: #c7d7c9;
  --tn-signal: #d7ff45;
  --tn-loss: #ff5c39;
  --tn-blue: #4d8cff;

  --tn-radius-xs: 8px;
  --tn-radius-sm: 12px;
  --tn-radius-md: 16px;
  --tn-radius-lg: 22px;
  --tn-radius-xl: 28px;
  --tn-radius-shell: 34px;
  --tn-radius-pill: 999px;

  --tn-space-1: 4px;
  --tn-space-2: 8px;
  --tn-space-3: 12px;
  --tn-space-4: 16px;
  --tn-space-5: 20px;
  --tn-space-6: 24px;
  --tn-space-8: 32px;
  --tn-space-10: 40px;
  --tn-space-12: 48px;

  --tn-shadow-soft: 0 18px 60px rgba(38, 30, 21, 0.10);
  --tn-shadow-panel: 0 10px 34px rgba(38, 30, 21, 0.08);
  --tn-shadow-button: 0 12px 28px rgba(207, 86, 53, 0.20);
  --tn-inner-edge: inset 0 1px 0 rgba(255, 255, 255, 0.72);

  --tn-text-xs: 0.75rem;
  --tn-text-sm: 0.875rem;
  --tn-text-base: 1rem;
  --tn-text-lg: 1.125rem;
  --tn-text-xl: 1.35rem;
  --tn-text-2xl: 1.75rem;
  --tn-text-3xl: 2.35rem;
  --tn-text-4xl: 3.15rem;
}

html.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tn-bg: #090d10;
  --tn-bg-soft: #111820;
  --tn-surface: rgba(18, 24, 31, 0.92);
  --tn-surface-strong: #151a20;
  --tn-ink: #f4f7fb;
  --tn-muted: #9aa7b4;
  --tn-border: rgba(255, 255, 255, 0.12);
  --tn-accent: #d7ff45;
  --tn-accent-strong: #bde631;
  --tn-teal: #62c4bd;
  --tn-mint: #22332c;
  --tn-shadow-soft: 0 24px 70px rgba(0, 0, 0, 0.42);
  --tn-shadow-panel: 0 14px 44px rgba(0, 0, 0, 0.32);
  --tn-shadow-button: 0 12px 34px rgba(215, 255, 69, 0.14);
  --tn-inner-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tn-type {
  font-family: var(--tn-font-sans);
  color: var(--tn-ink);
  font-size: var(--tn-text-base);
  line-height: 1.5;
  letter-spacing: 0;
}

.tn-mono,
.tn-number {
  font-family: var(--tn-font-mono);
  font-variant-numeric: tabular-nums;
}

.tn-focusable:focus-visible,
.tn-button:focus-visible,
.tn-field:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tn-accent) 72%, white 8%);
  outline-offset: 3px;
}

.tn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none !important;
  text-underline-offset: 0;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--tn-radius-md);
  padding: 0 18px;
  font: 800 var(--tn-text-sm) / 1.15 var(--tn-font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

a.tn-button,
a.tn-button:hover,
a.tn-button:focus,
a.tn-button:active,
a.tn-button:visited,
button.tn-button,
button.tn-button:hover,
button.tn-button:focus,
button.tn-button:active {
  text-decoration: none !important;
}

.tn-button:active {
  transform: translateY(1px) scale(0.99);
}

.tn-button-primary {
  background: linear-gradient(135deg, var(--tn-accent), var(--tn-accent-strong));
  color: #fffaf2;
  box-shadow: 0 14px 30px rgba(207, 86, 53, .18);
}

.tn-button-secondary {
  background: var(--tn-surface);
  color: var(--tn-ink);
  border-color: color-mix(in srgb, var(--tn-border) 82%, transparent);
  box-shadow: 0 10px 24px rgba(38, 30, 21, .06);
}

.tn-field {
  min-height: 46px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-md);
  background: color-mix(in srgb, var(--tn-surface-strong) 88%, white 12%);
  color: var(--tn-ink);
  padding: 0 14px;
  font: 500 var(--tn-text-base) / 1.25 var(--tn-font-sans);
}

.tn-card {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-xl);
  box-shadow: var(--tn-shadow-panel), var(--tn-inner-edge);
}