/* Generated by `pnpm --filter @dawnsmith/tokens build` from src/index.ts. Do not edit. */

:root {
  --ds-bg-app: #0A0A0C;
  --ds-bg-panel: #111114;
  --ds-bg-elevated: #17171B;
  --ds-bg-hover: #1E1E23;
  --ds-bg-active: #25252B;
  --ds-bg-inset: #0D0D10;
  --ds-border-subtle: #232329;
  --ds-border-default: #2E2E36;
  --ds-border-strong: #3D3D47;
  --ds-text-primary: #F3F1EC;
  --ds-text-secondary: #A8A6AE;
  --ds-text-muted: #6E6D76;
  --ds-text-inverse: #0A0A0C;
  --ds-accent-dawn: #E6C17A;
  --ds-accent-dawn-hover: #EFD08F;
  --ds-accent-dawn-soft: rgb(230 193 122 / 0.15);
  --ds-accent-amber: #FFB547;
  --ds-accent-rose: #FF5E7E;
  --ds-status-success: #3DD68C;
  --ds-status-success-soft: rgb(61 214 140 / 0.12);
  --ds-status-warning: #F5C451;
  --ds-status-warning-soft: rgb(245 196 81 / 0.12);
  --ds-status-danger: #FF5C5C;
  --ds-status-danger-soft: rgb(255 92 92 / 0.12);
  --ds-status-info: #6EA8FE;
  --ds-status-info-soft: rgb(110 168 254 / 0.12);
  --ds-brand-shopify: #95BF47;
  --ds-brand-claude: #D97757;
  --ds-brand-codex: #ECECEC;
  --ds-brand-opencode: #A78BFA;
  --ds-brand-gemini: #5B8DEF;
  --ds-space-2: 2px;
  --ds-space-4: 4px;
  --ds-space-6: 6px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-20: 20px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-48: 48px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 16px;
  --ds-radius-full: 999px;
  --ds-font-display: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --ds-font-ui: "Geist", "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --ds-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ds-elevation-popover: 0px 16px 48px -8px rgb(0 0 0 / 0.5), 0px 2px 6px 0px rgb(0 0 0 / 0.4);
  --ds-elevation-window: 0px 40px 80px -10px rgb(0 0 0 / 0.55);
  --ds-glow-dawn: 0px 0px 0px 1px rgb(230 193 122 / 0.35);
}

.ds-display-xl {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -1px;
}

.ds-display-lg {
  font-family: var(--ds-font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.5px;
}

.ds-heading-h1 {
  font-family: var(--ds-font-ui);
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.6px;
}

.ds-heading-h2 {
  font-family: var(--ds-font-ui);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.3px;
}

.ds-heading-h3 {
  font-family: var(--ds-font-ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.1px;
}

.ds-body-md {
  font-family: var(--ds-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0px;
}

.ds-body-md-medium {
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0px;
}

.ds-body-sm {
  font-family: var(--ds-font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0px;
}

.ds-body-sm-medium {
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0px;
}

.ds-body-xs {
  font-family: var(--ds-font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
}

.ds-label-xs {
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.6px;
}

.ds-mono-sm {
  font-family: var(--ds-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0px;
}

.ds-mono-md {
  font-family: var(--ds-font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
}



*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background: var(--ds-bg-app); color: var(--ds-text-primary);
  font-family: var(--ds-font-ui); font-size: 14px; line-height: 21px;
}
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
.page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 16px 24px;
  border-bottom: 1px solid var(--ds-border-subtle); background: var(--ds-bg-panel);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.mark {
  width: 24px; height: 24px; border-radius: var(--ds-radius-sm); background: var(--ds-accent-dawn);
  display: grid; place-items: center; color: var(--ds-text-inverse); font-size: 14px;
}
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--ds-text-secondary); font-size: 13px; }
main { width: min(960px, 100%); margin: 0 auto; padding: 48px 16px; }
main.narrow { width: min(440px, 100%); padding-top: 12vh; }
.stack { display: grid; gap: var(--ds-space-16); }
.page-head { display: grid; gap: 6px; }
.grid { display: grid; gap: var(--ds-space-24); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card {
  background: var(--ds-bg-panel); border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-lg); padding: var(--ds-space-24); display: grid; gap: var(--ds-space-16);
  align-content: start;
}
.card.accent { border-color: var(--ds-accent-dawn); box-shadow: var(--ds-glow-dawn); }
.label { color: var(--ds-text-muted); }
.card-title { color: var(--ds-text-primary); font-size: 15px; font-weight: 600; line-height: 22px; }
/* Big numbers in the UI font, like the app (the display serif read poorly). */
.ds-display-lg { font-family: var(--ds-font-ui); font-weight: 600; letter-spacing: -0.02em; }
.stack-tight { display: grid; gap: 6px; }
.download { display: grid; gap: 6px; justify-items: end; text-align: right; }
.btn.danger-text { color: var(--ds-status-danger); }
.btn.danger-text:hover { background: var(--ds-status-danger-soft); }
@media (max-width: 640px) { .download { justify-items: start; text-align: left; } }
.muted { color: var(--ds-text-muted); }
.accent-text { color: var(--ds-accent-dawn); }
.secondary { color: var(--ds-text-secondary); }
.mono { font-family: var(--ds-font-mono); font-size: 12px; }
.row { display: flex; align-items: center; gap: var(--ds-space-12); flex-wrap: wrap; }
.row .grow { flex: 1; }
form { margin: 0; }
.field { display: grid; gap: 6px; }
.field input {
  height: 40px; padding: 0 12px; border-radius: var(--ds-radius-md); font: inherit;
  background: var(--ds-bg-inset); color: var(--ds-text-primary); border: 1px solid var(--ds-border-default);
}
.field input:focus { outline: none; border-color: var(--ds-accent-dawn); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px;
  padding: 0 14px; border-radius: var(--ds-radius-md); border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn.block { width: 100%; }
.btn.primary { background: var(--ds-accent-dawn); color: var(--ds-text-inverse); }
.btn.primary:hover { background: var(--ds-accent-dawn-hover); }
.btn.secondary { background: var(--ds-bg-elevated); border-color: var(--ds-border-default); color: var(--ds-text-primary); }
.btn.secondary:hover { background: var(--ds-bg-hover); }
.btn.ghost { background: transparent; color: var(--ds-text-secondary); }
.btn.danger { background: var(--ds-status-danger-soft); color: var(--ds-status-danger); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ds-text-muted); font-size: 12px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--ds-border-subtle); }
.notice {
  padding: 12px 14px; border-radius: var(--ds-radius-md); background: var(--ds-bg-inset);
  border: 1px solid var(--ds-border-subtle); color: var(--ds-text-secondary); font-size: 12px; line-height: 16px;
}
.notice.error { border-color: var(--ds-status-danger); color: var(--ds-status-danger); }
.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.badge.success { background: var(--ds-status-success-soft); color: var(--ds-status-success); }
.badge.warning { background: var(--ds-status-warning-soft); color: var(--ds-status-warning); }
.badge.danger { background: var(--ds-status-danger-soft); color: var(--ds-status-danger); }
.badge.neutral { background: var(--ds-bg-active); color: var(--ds-text-secondary); }
.price { display: flex; align-items: baseline; gap: 8px; }
.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.list li::before { content: "✓"; color: var(--ds-status-success); margin-right: 10px; }
.device {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ds-radius-md);
  background: var(--ds-bg-inset); border: 1px solid var(--ds-border-subtle);
}
footer { padding: 24px; text-align: center; color: var(--ds-text-muted); font-size: 12px; }
.meter { height: 8px; border-radius: 999px; background: var(--ds-bg-inset); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--ds-accent-dawn); border-radius: inherit; }
.meter.low > span { background: var(--ds-status-warning); }
.stat { display: grid; gap: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-12); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ds-space-12); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-space-16); }
.plan {
  display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--ds-radius-lg);
  background: var(--ds-bg-inset); border: 1px solid var(--ds-border-subtle);
}
.plan.accent { border-color: var(--ds-accent-dawn); box-shadow: var(--ds-glow-dawn); }
.plan .stack { gap: 8px; }
.pack {
  display: grid; gap: 8px; padding: 14px; border-radius: var(--ds-radius-md);
  background: var(--ds-bg-inset); border: 1px solid var(--ds-border-subtle);
}
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 500; color: var(--ds-text-muted); font-size: 11px; padding: 0 0 8px; }
.table td { padding: 8px 0; border-top: 1px solid var(--ds-border-subtle); color: var(--ds-text-secondary); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.bars > span { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--ds-accent-dawn); opacity: 0.85; }
.wide { grid-column: 1 / -1; }
.pct-0 { --pct: 0%; }
.pct-5 { --pct: 5%; }
.pct-10 { --pct: 10%; }
.pct-15 { --pct: 15%; }
.pct-20 { --pct: 20%; }
.pct-25 { --pct: 25%; }
.pct-30 { --pct: 30%; }
.pct-35 { --pct: 35%; }
.pct-40 { --pct: 40%; }
.pct-45 { --pct: 45%; }
.pct-50 { --pct: 50%; }
.pct-55 { --pct: 55%; }
.pct-60 { --pct: 60%; }
.pct-65 { --pct: 65%; }
.pct-70 { --pct: 70%; }
.pct-75 { --pct: 75%; }
.pct-80 { --pct: 80%; }
.pct-85 { --pct: 85%; }
.pct-90 { --pct: 90%; }
.pct-95 { --pct: 95%; }
.pct-100 { --pct: 100%; }
.meter > span { width: var(--pct, 0%); }
.bars > span { height: max(2px, var(--pct, 0%)); }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }