@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@700&display=swap";

/* src/styles/tokens.css */
:root {
  --ds-color-bg: #ffffff;
  --ds-color-surface: #ffffff;
  --ds-color-surface-2: #f4f4f5;
  --ds-color-text: #18181b;
  --ds-color-text-muted: #71717a;
  --ds-color-border: #e4e4e7;
  --ds-color-border-strong: #d4d4d8;
  --ds-color-primary: #18181b;
  --ds-color-primary-hover: #27272a;
  --ds-color-primary-text: #ffffff;
  --ds-color-danger: #dc2626;
  --ds-color-danger-hover: #b91c1c;
  --ds-color-danger-text: #ffffff;
  --ds-color-danger-bg: #fee2e2;
  --ds-color-danger-fg: #991b1b;
  --ds-color-success-bg: #dcfce7;
  --ds-color-success-fg: #166534;
  --ds-color-warning-bg: #fef3c7;
  --ds-color-warning-fg: #92400e;
  --ds-color-info-bg: #e0e7ff;
  --ds-color-info-fg: #3730a3;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-full: 9999px;
  --ds-font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --ds-text-xs: 12px;
  --ds-text-sm: 14px;
  --ds-text-md: 16px;
  --ds-text-lg: 18px;
  --ds-text-xl: 24px;
  --ds-font-weight-normal: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-line-tight: 1.2;
  --ds-line-normal: 1.5;
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* src/styles/components.css */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-font-weight-medium);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  line-height: var(--ds-line-tight);
  white-space: nowrap;
}
.ds-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ds-button--full {
  width: 100%;
}
.ds-button--sm {
  font-size: var(--ds-text-sm);
  padding: var(--ds-space-1) var(--ds-space-3);
  height: 32px;
}
.ds-button--md {
  font-size: var(--ds-text-sm);
  padding: var(--ds-space-2) var(--ds-space-4);
  height: 40px;
}
.ds-button--lg {
  font-size: var(--ds-text-md);
  padding: var(--ds-space-3) var(--ds-space-5);
  height: 48px;
}
.ds-button--primary {
  background: var(--ds-color-primary);
  color: var(--ds-color-primary-text);
}
.ds-button--primary:hover:not(:disabled) {
  background: var(--ds-color-primary-hover);
}
.ds-button--secondary {
  background: var(--ds-color-surface);
  color: var(--ds-color-text);
  border-color: var(--ds-color-border-strong);
}
.ds-button--secondary:hover:not(:disabled) {
  background: var(--ds-color-surface-2);
}
.ds-button--ghost {
  background: transparent;
  color: var(--ds-color-text);
}
.ds-button--ghost:hover:not(:disabled) {
  background: var(--ds-color-surface-2);
}
.ds-button--danger {
  background: var(--ds-color-danger);
  color: var(--ds-color-danger-text);
}
.ds-button--danger:hover:not(:disabled) {
  background: var(--ds-color-danger-hover);
}
.ds-input {
  font-family: var(--ds-font-sans);
  color: var(--ds-color-text);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-md);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-input::placeholder {
  color: var(--ds-color-text-muted);
}
.ds-input:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1);
}
.ds-input:disabled {
  background: var(--ds-color-surface-2);
  opacity: 0.6;
  cursor: not-allowed;
}
.ds-input--invalid {
  border-color: var(--ds-color-danger);
}
.ds-input--invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.ds-input--sm {
  font-size: var(--ds-text-sm);
  padding: var(--ds-space-1) var(--ds-space-2);
  height: 32px;
}
.ds-input--md {
  font-size: var(--ds-text-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
  height: 40px;
}
.ds-input--lg {
  font-size: var(--ds-text-md);
  padding: var(--ds-space-3) var(--ds-space-4);
  height: 48px;
}
.ds-card {
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  color: var(--ds-color-text);
  font-family: var(--ds-font-sans);
}
.ds-card--pad-none {
  padding: 0;
}
.ds-card--pad-sm {
  padding: var(--ds-space-3);
}
.ds-card--pad-md {
  padding: var(--ds-space-4);
}
.ds-card--pad-lg {
  padding: var(--ds-space-6);
}
.ds-card--interactive {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.ds-card--interactive:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-1px);
}
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-weight-medium);
  line-height: var(--ds-line-tight);
  padding: 2px var(--ds-space-2);
  border-radius: var(--ds-radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
}
.ds-badge--neutral {
  background: var(--ds-color-surface-2);
  color: var(--ds-color-text);
  border-color: var(--ds-color-border);
}
.ds-badge--primary {
  background: var(--ds-color-info-bg);
  color: var(--ds-color-info-fg);
}
.ds-badge--success {
  background: var(--ds-color-success-bg);
  color: var(--ds-color-success-fg);
}
.ds-badge--warning {
  background: var(--ds-color-warning-bg);
  color: var(--ds-color-warning-fg);
}
.ds-badge--danger {
  background: var(--ds-color-danger-bg);
  color: var(--ds-color-danger-fg);
}
.ds-stack {
  display: flex;
}
.ds-headline {
  font-family: var(--ds-font-display, var(--ds-font-sans));
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-tight);
  color: var(--ds-color-text);
  margin: 0;
}
.ds-headline--h1 {
  font-size: var(--ds-headline-1, var(--ds-text-xl));
}
.ds-headline--h2 {
  font-size: var(--ds-headline-2, var(--ds-text-lg));
}
.ds-headline--h3 {
  font-size: var(--ds-headline-3, var(--ds-text-md));
}
.ds-headline__lead {
  color: var(--ds-color-text-muted);
}
.ds-headline__main {
  color: var(--ds-color-text);
}
.ds-band {
  width: 100%;
  box-sizing: border-box;
  padding: var(--ds-space-8) var(--ds-space-4);
  font-family: var(--ds-font-sans);
  color: var(--ds-color-text);
}
.ds-band--1 {
  background: var(--ds-color-bg);
}
.ds-band--2 {
  background: var(--ds-color-surface);
}
.ds-band--3 {
  background: var(--ds-color-surface-2);
}
.ds-band--air-tight {
  padding-block: var(--ds-band-y-tight, var(--ds-space-6));
}
.ds-band--air-default {
  padding-block: var(--ds-band-y-default, var(--ds-space-8));
}
.ds-band--air-wide {
  padding-block: var(--ds-band-y-wide, var(--ds-space-8));
}
.ds-band--warm {
  box-shadow: var(--so-gold-glow, none);
}

/* src/styles/theme-so.css */
:root {
  --ds-color-bg: #040712;
  --ds-color-surface: #0B111F;
  --ds-color-surface-2: #111827;
  --ds-color-text: #EDEDEF;
  --ds-color-text-muted: #8A8F98;
  --ds-color-border: #1E293B;
  --ds-color-border-strong: #334155;
  --ds-color-primary: #F5B455;
  --ds-color-primary-hover: #F6C478;
  --ds-color-primary-text: #040712;
  --ds-color-danger: #EF4444;
  --ds-color-danger-hover: #DC2626;
  --ds-color-danger-text: #EDEDEF;
  --ds-color-danger-bg: #450A0A;
  --ds-color-danger-fg: #FCA5A5;
  --ds-color-success-bg: #052E16;
  --ds-color-success-fg: #22C55E;
  --ds-color-warning-bg: #451A03;
  --ds-color-warning-fg: #F59E0B;
  --ds-color-info-bg: #0C1A3D;
  --ds-color-info-fg: #93C5FD;
  --ds-font-sans:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  --ds-font-display:
    "Playfair Display",
    Georgia,
    "Times New Roman",
    serif;
  --ds-font-mono:
    "JetBrains Mono",
    "Fira Code",
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  --ds-text-xs: 12px;
  --ds-text-sm: 14px;
  --ds-text-md: 16px;
  --ds-font-weight-medium: 500;
  --ds-line-tight: 1.2;
  --ds-headline-1: clamp(36px, 5vw, 56px);
  --ds-headline-2: clamp(28px, 3.5vw, 40px);
  --ds-headline-3: clamp(20px, 2.5vw, 26px);
  --ds-band-y-tight: clamp(32px, 4vw, 48px);
  --ds-band-y-default: clamp(48px, 6vw, 80px);
  --ds-band-y-wide: clamp(64px, 8vw, 112px);
  --ds-radius-md: 6px;
  --ds-radius-lg: 10px;
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --ds-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --so-gold-glow: 0 0 0 1px rgba(245, 180, 85, 0.18), 0 8px 40px -12px rgba(245, 180, 85, 0.25);
}
:root {
  color-scheme: dark;
}
body {
  background: var(--ds-color-bg);
  color: var(--ds-color-text);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
}
.ds-button--secondary {
  background: transparent;
  color: var(--ds-color-text);
  border-color: var(--ds-color-border-strong);
}
.ds-button--secondary:hover:not(:disabled) {
  background: transparent;
  border-color: var(--ds-color-primary);
  color: var(--ds-color-primary);
}
.ds-input:focus {
  box-shadow: 0 0 0 3px rgba(245, 180, 85, 0.22);
}
.ds-input--invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.24);
}

/* src/styles/so.css */