/* Ronda — design tokens (dark default). Lifted from styles.scss handoff. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0');

:root {
  --rnd-accent-h: 290;
  --rnd-accent-c: 0.18;
  --rnd-accent-l: 0.62;
  --rnd-font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --rnd-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body {
  color-scheme: dark;
  --bg:                oklch(0.155 0.008 270);
  --surface:           oklch(0.185 0.008 270);
  --surface-1:         oklch(0.21  0.008 270);
  --surface-2:         oklch(0.235 0.009 270);
  --surface-3:         oklch(0.26  0.009 270);
  --fg:                oklch(0.97 0.005 270);
  --fg-muted:          oklch(0.72 0.01  270);
  --fg-faint:          oklch(0.55 0.012 270);
  --border:            oklch(0.27 0.01  270);
  --border-strong:     oklch(0.36 0.012 270);
  --accent:            oklch(calc(var(--rnd-accent-l) + 0.05) var(--rnd-accent-c) var(--rnd-accent-h));
  --accent-hover:      oklch(calc(var(--rnd-accent-l) + 0.12) var(--rnd-accent-c) var(--rnd-accent-h));
  --accent-fg:         oklch(0.12 0.01 270);
  --accent-soft:       oklch(0.27 0.06 var(--rnd-accent-h));
  --accent-soft-fg:    oklch(0.88 0.10 var(--rnd-accent-h));
  --success:           oklch(0.72 0.14 150);
  --success-soft:      oklch(0.28 0.06 150);
  --warn:              oklch(0.78 0.14 70);
  --warn-soft:         oklch(0.30 0.06 70);
  --danger:            oklch(0.72 0.16 25);
  --danger-soft:       oklch(0.30 0.07 25);
  --shadow-sm:         0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-md:         0 8px 24px -8px oklch(0 0 0 / 0.6), 0 2px 4px oklch(0 0 0 / 0.3);
  --shadow-lg:         0 24px 48px -16px oklch(0 0 0 / 0.7);
  --ring:              0 0 0 3px oklch(calc(var(--rnd-accent-l) + 0.05) var(--rnd-accent-c) var(--rnd-accent-h) / 0.35);
  font-family: var(--rnd-font-display);
  background: var(--bg);
  color: var(--fg);
}

body { margin: 0; -webkit-font-smoothing: antialiased; }

.rnd-mono { font-family: var(--rnd-font-mono); font-feature-settings: 'ss01'; }
.rnd-eyebrow {
  font-family: var(--rnd-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.rnd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px;
  border-radius: 999px;
  font-family: var(--rnd-font-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--surface-2); color: var(--fg-muted);
  border: 1px solid var(--border);
}
.rnd-pill-accent  { background: var(--accent-soft); color: var(--accent-soft-fg); border-color: transparent; }
.rnd-pill-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.rnd-pill-warn    { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.rnd-pill-danger  { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.rnd-pill-solid   { background: var(--accent); color: var(--accent-fg); border-color: transparent; }

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  display: inline-block; line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}