/**
 * 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.
 * Brand absolutes: brand-tokens.css (--cs-*). Gold = settle line + settled money only.
 */

@import url('/brand-tokens.css');
@import url('/cs-brand.css');

/* Light-only app — ignore system dark mode (no dark design system variant) */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}

html {
  color-scheme: light;
}

:root {
  color-scheme: light;

  /* ── Color tokens — alias signed --cs-* brand absolutes ───────────────── */
  --forest: var(--cs-forest);
  --gold: var(--cs-gold); /* settled / positive money + settle line ONLY */
  --cream: var(--cs-cream);
  --paper: var(--cs-paper);
  --ink: var(--cs-forest);
  --muted: var(--cs-muted);
  --line: var(--cs-line);
  --olive: var(--cs-olive);
  --olive-tint: rgba(74, 93, 62, 0.12);
  --cs-shell-bg: var(--cs-cream);
  --on-forest: var(--cs-cream);
  --red: var(--cs-red);
  --clay: #A8593E;
  --birdie: #3B6D11;
  --wolf-purple: #6B4C9A;

  /* Aliases consumed by legacy cs-shared.css / scoring pages */
  --bg: var(--cs-cream);
  --bg-card: var(--cs-paper);
  --text: var(--ink);
  --text-dim: var(--cs-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(--cs-gold-decided, #9A7B2D);
}

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

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

/* A final $0 is muted. It is not decided gold. */
.money-neutral {
  color: var(--muted);
  font-family: var(--font-mono);
}