@import url("/design-tokens.css?v=20260401-01");
@import url("/design-patterns.css?v=20260401-01");

:root {
  --font-sans: var(--ds-font-sans);

  --color-bg: var(--ds-bg);
  --color-bg-soft: var(--ds-bg-soft);
  --color-surface: var(--ds-panel);
  --color-surface-soft: var(--ds-panel-soft);
  --color-surface-strong: var(--ds-panel-strong);
  --color-text: var(--ds-ink);
  --color-text-soft: var(--ds-text-soft);
  --color-text-muted: var(--ds-text-muted);
  --color-border: var(--ds-line);
  --color-border-soft: var(--ds-line-soft);
  --color-header: var(--ds-brand);
  --color-header-soft: var(--ds-brand-soft);
  --color-accent: var(--ds-accent);
  --color-accent-soft: var(--ds-accent-soft);
  --color-accent-strong: var(--ds-accent-strong);

  --radius-sm: var(--ds-radius-sm);
  --radius-md: var(--ds-radius-md);
  --radius-lg: var(--ds-radius-lg);
  --radius-xl: var(--ds-radius-xl);
  --radius-pill: var(--ds-radius-pill);

  --shadow-soft: var(--ds-shadow-soft);
  --shadow-card: var(--ds-shadow-card);
  --shadow-float: var(--ds-shadow-float);

  --space-1: var(--ds-space-1);
  --space-2: var(--ds-space-2);
  --space-3: var(--ds-space-3);
  --space-4: var(--ds-space-4);
  --space-5: var(--ds-space-5);
  --space-6: var(--ds-space-6);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--ds-bg-gradient);
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--ds-bg-gradient);
}

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

.ui-card {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}

.ui-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
}

.ui-button-primary {
  border: none;
  color: #fff;
  background: var(--color-accent);
  box-shadow: var(--shadow-float);
}

.ui-button-secondary {
  border: 1px solid var(--color-border-soft);
  color: var(--color-text);
  background: var(--ds-surface-tint);
}

.ui-input {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-pill);
  background: var(--ds-surface-tint-strong);
  color: var(--color-text);
  outline: none;
}

.ui-input:focus {
  border-color: rgba(47, 153, 115, 0.45);
  box-shadow: 0 0 0 4px rgba(47, 153, 115, 0.1);
}