/* Overtime Agency — color tokens */
:root {
  /* Base palette */
  --ot-red: #9B0102;            /* brand red — logo, primary actions */
  --ot-red-deep: #7C0102;       /* pressed / hover darken */
  --ot-red-bright: #C11212;     /* accents, hover lift on dark */
  --ot-cream: #F2E4D7;          /* brand cream — light surfaces */
  --ot-cream-bright: #F7EEE4;   /* raised cards on cream */
  --ot-cream-dim: #E8D6C5;      /* borders, wells on cream */
  --ot-ink: #1A1210;            /* near-black warm ink */
  --ot-ink-soft: #4A3F3A;       /* secondary text */
  --ot-ink-faint: #8A7A70;      /* tertiary text, placeholders */

  /* Semantic — light (cream) context */
  --surface-page: var(--ot-cream);
  --surface-card: var(--ot-cream-bright);
  --surface-well: var(--ot-cream-dim);
  --surface-inverse: var(--ot-red);
  --text-display: var(--ot-red);
  --text-body: var(--ot-ink);
  --text-secondary: var(--ot-ink-soft);
  --text-muted: var(--ot-ink-faint);
  --text-on-red: var(--ot-cream);
  --border-default: rgba(26, 18, 16, 0.18);
  --border-strong: var(--ot-ink);
  --accent: var(--ot-red);
  --accent-hover: var(--ot-red-deep);

  /* Feedback (used sparingly; red is brand, so success/warn skew neutral) */
  --ok: #2E6B34;
  --warn: #A05E00;
  --danger: #9B0102;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--ot-cream), 0 0 0 4px var(--ot-red);
}