/**
 * Chalk & Settle — Design System layer (Phase 1)
 * Source: docs/design/.../DESIGN_SYSTEM.md
 * Load after fonts.css, before cs-shared.css on consumer screens.
 * Does not replace cs-shared.css tokens — extends with handoff-canonical names.
 */

:root {
  /* ── Color tokens (handoff canonical) ─────────────────────────────────── */
  --forest: #1B3D2F;
  --gold: #9A7B2D;
  --cream: #F4F0E8;
  --paper: #FDFCF9;
  --ink: #1B3D2F;
  --muted: #A09890;
  --line: #E0DBD0;
  --olive: #4A5D3E;
  --red: #A8453E;
  --clay: #A8593E;
  --birdie: #3B6D11;
  --wolf-purple: #6B4C9A;

  /* Aliases consumed by legacy cs-shared.css / scoring pages */
  --bg: var(--cream);
  --bg-card: var(--paper);
  --text: var(--ink);
  --text-dim: var(--muted);
  --wolf: var(--wolf-purple);

  /* ── Typography families ──────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-team: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* ── Type scale (approved wire sizes) ─────────────────────────────────── */
  --type-hero-name: 21px;
  --type-hero-money: 22px;
  --type-hero-state: 18px;
  --type-hole-title: 22px;
  --type-screen-title: 24px;
  --type-team-name: 16px;
  --type-body: 14px;
  --type-body-sm: 12px;
  --type-caption: 11px;
  --type-micro: 10px;
  --type-label: 9px;
  --type-score-lg: 26px;
  --type-score-md: 24px;
  --type-mono-sm: 13px;
  --type-mono-xs: 11px;
  --type-nav: 14px;
  --type-btn: 16px;
  --type-section: 13px;

  --weight-display: 700;
  --weight-body: 400;
  --weight-body-medium: 500;
  --weight-body-semibold: 600;
  --weight-mono: 500;

  --leading-tight: 1.05;
  --leading-none: 1;
  --tracking-caps: 0.08em;
  --tracking-mono: 0.04em;

  /* ── Phone shells ─────────────────────────────────────────────────────── */
  --shell-width: 390px;
  --shell-height: 952px;
  --shell-radius: 44px;
  --shell-border: 10px;
  --shell-settlement-width: 430px;
  --shell-settlement-radius: 30px;
  --shell-settlement-border: 8px;

  /* ── Radii & touch ────────────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 13px;
  --radius-pill: 20px;
  --touch-min: 44px;

  /* ── Motion (restraint) ───────────────────────────────────────────────── */
  --motion-fast: 0.15s ease;
  --motion-base: 0.25s ease;
  --motion-slow: 0.35s ease;
}

/* ── Typography roles ───────────────────────────────────────────────────── */
.cs-font-display {
  font-family: var(--font-display);
}

.cs-font-body {
  font-family: var(--font-body);
}

.cs-font-mono,
.num,
.mn {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cs-font-team,
.cs-team-name {
  font-family: var(--font-team);
  font-style: italic;
}

.cs-section-label {
  font-family: var(--font-team);
  font-style: italic;
  font-size: var(--type-section);
  color: var(--muted);
  text-transform: lowercase;
}

/* ── Phone shells ───────────────────────────────────────────────────────── */
.cs-phone-shell {
  width: var(--shell-width);
  max-width: 100%;
  height: var(--shell-height);
  margin-inline: auto;
  background: var(--cream);
  border: var(--shell-border) solid var(--forest);
  border-radius: var(--shell-radius);
  overflow: hidden;
}

.cs-phone-shell--settlement-detail {
  width: var(--shell-settlement-width);
  border-radius: var(--shell-settlement-radius);
  border-width: var(--shell-settlement-border);
}

.cs-phone-shell--catalog,
.cs-phone-shell--history,
.cs-phone-shell--profile,
.cs-phone-shell--settings {
  width: var(--shell-width);
  border-radius: var(--shell-radius);
  border-width: var(--shell-border);
}

/* ── Scroll rules (screen family) ───────────────────────────────────────── */
.cs-scroll-scoring {
  overflow: hidden;
  height: var(--shell-height);
}

.cs-scroll-settlement,
.cs-scroll-history,
.cs-scroll-wizard {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.cs-scroll-fixed-panel {
  overflow: hidden;
  height: var(--shell-height);
}

/* ── Money-color utilities (gold / ink / red law) ─────────────────────────── */
.money-decided,
.money-pending,
.money-loss {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono);
}

.money-decided {
  color: var(--gold);
}

.money-pending {
  color: var(--ink);
}

.money-loss {
  color: var(--red);
}

/* Zero / neutral money at settlement */
.money-neutral {
  color: var(--ink);
  font-family: var(--font-mono);
}