/*


 */

/*
 * Harborline design tokens — warm off-white / berry accent palette,
 * matching the spirit of the static mockup this app replicates.
 */
:root {
  --bg: #F6F4F1;
  --surface: #FFFFFF;
  --surface-sunken: #EFEBE5;
  --ink: #1F2430;
  --ink-muted: #6B7080;
  --border: #E3DFD7;
  --accent: #A8214A;
  --growth: #2B6E63;
  --success: #2E7D4F;
  --warning: #B98418;
  --critical: #B23B2E;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181F;
    --surface: #1F212B;
    --surface-sunken: #191A22;
    --ink: #ECEAF2;
    --ink-muted: #9A9CAC;
    --border: #2C2E3A;
    --accent: #E14B74;
    --growth: #4FA396;
    --success: #4FA968;
    --warning: #DBA23F;
    --critical: #DD6B57;
  }
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}

.mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
}
.chip.processing { color: var(--warning); background: color-mix(in srgb, var(--warning) 16%, transparent); }
.chip.shipped { color: var(--growth); background: color-mix(in srgb, var(--growth) 16%, transparent); }
.chip.delivered { color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent); }
.chip.refunded { color: var(--critical); background: color-mix(in srgb, var(--critical) 16%, transparent); }

.nav-item.active { color: var(--accent); background: var(--surface-sunken); }