/**
 * DFL design tokens — canonical source for dfl-labs prototypes.
 * Dark-first. Mirrors @dfl-labs/design-tokens. Polaris-aligned: autonomy, clarity, focus.
 */
:root {
  /* DFL brand palette (canonical) */
  --dfl-cream: #FEEBDC;
  --dfl-red: #C52614;
  --dfl-red-warm: hsl(11 78% 62%);
  --dfl-coffee: #3C2422;
  --dfl-bg: #0F0E0C;
  --dfl-bg-elev: #1A1815;
  --dfl-bg-elev-2: #221F1B;
  --dfl-border: rgba(254, 235, 220, 0.08);
  --dfl-border-strong: rgba(254, 235, 220, 0.16);
  --dfl-muted: rgba(254, 235, 220, 0.55);
  --dfl-green: #5DD68A;
  --dfl-yellow: #E8B23B;
  --dfl-blue: #6BB6FF;

  /* radius scale */
  --dfl-radius-sm: 0.375rem;
  --dfl-radius-md: 0.625rem;
  --dfl-radius-lg: 1rem;
  --dfl-radius-xl: 1.25rem;

  /* typography */
  --dfl-font-sans: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif;
  --dfl-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* shadcn-compatible HSL channels (for Tailwind users) */
  --background: 30 14% 5%;
  --foreground: 27 92% 93%;
  --card: 30 11% 9%;
  --card-foreground: 27 92% 93%;
  --primary: 6 81% 43%;
  --primary-foreground: 27 92% 93%;
  --secondary: 8 26% 19%;
  --secondary-foreground: 27 92% 93%;
  --muted: 8 26% 19%;
  --muted-foreground: 27 30% 70%;
  --accent: 8 26% 19%;
  --accent-foreground: 27 92% 93%;
  --border: 12 11% 15%;
  --input: 12 11% 15%;
  --ring: 6 81% 43%;
  --radius: 0.625rem;
}

html, body {
  background: var(--dfl-bg);
  color: var(--dfl-cream);
  font-family: var(--dfl-font-sans);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mono, [data-mono] {
  font-family: var(--dfl-font-mono);
}

.label, [data-label] {
  font-family: var(--dfl-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px;
  color: var(--dfl-muted);
}

/* Button primitives */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: var(--dfl-radius-md);
  font-family: var(--dfl-font-sans);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 60ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--dfl-red);
  color: var(--dfl-cream);
}
.btn-primary:hover { background: var(--dfl-red-warm); }

.btn-secondary {
  background: var(--dfl-bg-elev);
  color: var(--dfl-cream);
  border-color: var(--dfl-border-strong);
}
.btn-secondary:hover { background: var(--dfl-bg-elev-2); }

.btn-ghost {
  background: transparent;
  color: var(--dfl-cream);
  border-color: var(--dfl-border);
}
.btn-ghost:hover { background: var(--dfl-bg-elev); border-color: var(--dfl-border-strong); }

/* Card primitive */
.card {
  background: var(--dfl-bg-elev);
  border: 1px solid var(--dfl-border);
  border-radius: var(--dfl-radius-lg);
  padding: 1.25rem;
}