:root {
  color-scheme: dark;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Work Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --c-near-black: #141413;
  --c-terracotta: #c96442;
  --c-coral: #d97757;
  --c-error: #b53333;
  --c-focus: #3898ec;

  --c-parchment: #f5f4ed;
  --c-ivory: #faf9f5;
  --c-white: #ffffff;
  --c-warm-sand: #e8e6dc;
  --c-dark-surface: #30302e;

  --c-charcoal-warm: #4d4c48;
  --c-olive-gray: #5e5d59;
  --c-stone-gray: #87867f;
  --c-dark-warm: #3d3d3a;
  --c-warm-silver: #b0aea5;

  --c-border-cream: #f0eee6;
  --c-border-warm: #e8e6dc;
  --c-border-dark: #30302e;
  --c-ring-warm: #d1cfc5;
  --c-ring-deep: #c2c0b6;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  --shadow-whisper: rgba(0, 0, 0, 0.05) 0 4px 24px;
  --ring-neutral: 0 0 0 1px var(--c-ring-warm);
  --ring-active: 0 0 0 1px var(--c-ring-deep);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--c-warm-silver);
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--c-terracotta) 16%, transparent), transparent 28%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--c-dark-surface) 42%, transparent), transparent 30%),
    radial-gradient(circle at 58% 88%, color-mix(in srgb, var(--c-coral) 10%, transparent), transparent 26%),
    var(--c-near-black);
}

a {
  color: inherit;
}

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

::selection {
  background: color-mix(in srgb, var(--c-terracotta) 24%, white);
  color: var(--c-near-black);
}

.ds-card {
  background: color-mix(in srgb, var(--c-dark-surface) 92%, black);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-whisper);
  color: var(--c-warm-silver);
}

.ds-panel {
  background: color-mix(in srgb, var(--c-dark-surface) 84%, black);
  border: 1px solid var(--c-border-dark);
  border-radius: var(--radius-md);
  color: var(--c-warm-silver);
}

.ds-btn {
  appearance: none;
  border: 0;
  border-radius: var(--radius-md);
  min-height: 40px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ds-btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none;
}

.ds-btn--primary {
  color: var(--c-ivory);
  background: var(--c-terracotta);
  box-shadow: 0 0 0 1px var(--c-terracotta);
}

.ds-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-terracotta) 90%, black);
}

.ds-btn--secondary {
  color: var(--c-charcoal-warm);
  background: var(--c-warm-sand);
  box-shadow: var(--ring-neutral);
}

.ds-btn--secondary:hover:not(:disabled) {
  box-shadow: var(--ring-active);
}

.ds-btn--ghost {
  color: var(--c-warm-silver);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-border-dark);
}

.ds-btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-warm-sand) 40%, white);
}

.ds-btn--dark {
  color: var(--c-ivory);
  background: var(--c-dark-surface);
  box-shadow: 0 0 0 1px var(--c-border-dark);
}

.ds-btn--danger {
  color: var(--c-error);
  background: color-mix(in srgb, var(--c-error) 10%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-error) 30%, white);
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border-dark);
  background: color-mix(in srgb, var(--c-dark-surface) 90%, black);
  color: var(--c-warm-silver);
  padding: 8px 12px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ds-textarea {
  min-height: 96px;
  resize: vertical;
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--c-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 22%, black);
  outline: none;
}

.ds-label {
  display: inline-flex;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 0.12px;
  font-weight: 600;
  color: var(--c-warm-silver);
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  border: 1px solid var(--c-border-dark);
  background: color-mix(in srgb, var(--c-dark-surface) 88%, black);
  color: var(--c-warm-silver);
}

.ds-pill--ok {
  color: #1b6d48;
  border-color: color-mix(in srgb, #1b6d48 28%, white);
  background: color-mix(in srgb, #1b6d48 10%, white);
}

.ds-pill--warn {
  color: #9a5d19;
  border-color: color-mix(in srgb, #9a5d19 30%, white);
  background: color-mix(in srgb, #9a5d19 12%, white);
}

.ds-pill--danger {
  color: var(--c-error);
  border-color: color-mix(in srgb, var(--c-error) 30%, white);
  background: color-mix(in srgb, var(--c-error) 10%, white);
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}