/* Design tokens — hand-copied from docs/DESIGN.md (Meu Produtor, inspired by Spotify) */
/* Formato prosa/sem frontmatter YAML: valores copiados manualmente das seções 2-6 do docs/DESIGN.md. */
:root {
  /* cores — base */
  --color-canvas: #121212;
  --color-surface: #181818;
  --color-surface-mid: #1f1f1f;
  --color-card: #252525;
  --color-card-alt: #272727;

  /* cores — texto */
  --color-text: #ffffff;
  --color-text-bright: #fdfdfd;
  --color-text-muted: #b3b3b3;
  --color-text-dim: #7c7c7c;

  /* cores — marca e semântica */
  --color-primary: #1ed760;
  --color-primary-border: #1db954;
  --color-on-primary: #000000;
  --color-danger: #f3727f;
  --color-warning: #ffa42b;
  --color-info: #539df5;
  --color-success-soft: rgba(30, 215, 96, 0.14);
  --color-danger-soft: rgba(243, 114, 127, 0.14);
  --color-border: #4d4d4d;
  --color-border-light: #7c7c7c;

  /* tipografia */
  --font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-section-title: 700 24px/1.3 var(--font-family);
  --font-feature-heading: 600 18px/1.3 var(--font-family);
  --font-body-bold: 700 16px/1.5 var(--font-family);
  --font-body: 400 16px/1.5 var(--font-family);
  --font-button-uppercase: 700 14px/1 var(--font-family);
  --letter-spacing-button: 1.4px;
  --font-nav-bold: 700 14px/1.4 var(--font-family);
  --font-nav: 400 14px/1.4 var(--font-family);
  --font-caption-bold: 700 14px/1.5 var(--font-family);
  --font-caption: 400 14px/1.5 var(--font-family);
  --font-small-bold: 700 12px/1.5 var(--font-family);
  --font-small: 400 12px/1.4 var(--font-family);
  --font-badge: 600 12px/1.4 var(--font-family);

  /* espaçamento — base 8px */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* raio */
  --radius-badge: 2px;
  --radius-input: 4px;
  --radius-card: 6px;
  --radius-panel: 8px;
  --radius-overlay: 16px;
  --radius-pill-lg: 500px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* sombra */
  --shadow-medium: rgba(0, 0, 0, 0.3) 0px 8px 8px;
  --shadow-heavy: rgba(0, 0, 0, 0.5) 0px 8px 24px;
  --shadow-inset-border: rgb(18, 18, 18) 0px 1px 0px, rgb(124, 124, 124) 0px 0px 0px 1px inset;
}

/* Component starters — renomeie/ajuste à vontade nas telas reais (Fase 3). */
.dm-btn {
  border: none;
  cursor: pointer;
  font: var(--font-button-uppercase);
  letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: var(--space-sm) var(--space-lg);
}
.dm-btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.dm-btn-secondary {
  background: var(--color-surface-mid);
  color: var(--color-text);
}
.dm-btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
}

.dm-card {
  background: var(--color-surface);
  border-radius: var(--radius-panel);
  padding: var(--space-2xl);
}
.dm-card--elevated {
  box-shadow: var(--shadow-medium);
}

.dm-input {
  background: var(--color-surface-mid);
  color: var(--color-text);
  border: none;
  box-shadow: var(--shadow-inset-border);
  border-radius: var(--radius-input);
  padding: var(--space-md) var(--space-lg);
  font: var(--font-body);
}

.dm-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: var(--space-xxs) var(--space-md);
  font: var(--font-small);
}
.dm-badge-success {
  background: var(--color-success-soft);
  color: var(--color-primary);
}
.dm-badge-neutral {
  background: var(--color-surface-mid);
  color: var(--color-text-muted);
}
.dm-badge-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}