/* AskJim color system — one confident warm accent on a warm-white base.
   Rules: never cool gray, never tan/beige, never pure white. Every neutral
   is warmed. The accent does the work; on dark grounds it lightens to ember. */
:root {
  /* ---- Brand accent (vermilion family) ---- */
  --color-vermilion: #c8472e; /* primary CTA, rules, links-in-context, newsletter ground */
  --color-press: #a93a24;     /* hover / pressed accent */
  --color-deep: #8f2f1c;      /* hero & stakes overlay gradient */
  --color-ember: #e0794f;     /* accent on dark grounds: eyebrows, "Jim", underlines */

  /* ---- Ink / text (warm near-blacks) ---- */
  --ink: #171511;        /* dark grounds, headlines */
  --ink-wordmark: #1c1a17; /* wordmark "Ask", default near-black */
  --ink-quote: #221f1a;  /* serif pull quote */
  --ink-nav: #3a352e;    /* nav links */
  --ink-body: #4a443c;   /* body on light */
  --ink-secondary: #5a534a; /* secondary body */
  --ink-caption: #8a8276; /* captions / fine print */
  --ink-meta: #9a9286;   /* [verify] meta notes */

  /* ---- Surfaces (warm) ---- */
  --paper: #faf8f5;      /* page base */
  --raised: #ffffff;     /* raised card / hover lift */
  --sand: #f1ece3;       /* sand panel (Proof section) */
  --tint: #f3eee5;       /* faint warm tint */

  /* ---- On-dark text (the shift / footer) ---- */
  --on-dark: #fbf7f0;
  --on-dark-2: #d9d2c7;
  --on-dark-3: #b8b0a3;
  --on-dark-4: #a39b8e;
  --on-dark-5: #cfc8bc;
  --on-dark-6: #7d766a;
  --on-dark-hairline: #332e26;

  /* ---- Hairlines (light) ---- */
  --hairline-header: #e7e2da;
  --hairline-divider: #e0dace;
  --hairline-cell: #e4ddd0;

  /* ---- Hero / stakes overlay ---- */
  --hero-overlay: linear-gradient(
    90deg,
    rgba(23, 21, 17, 0.95) 0%,
    rgba(23, 21, 17, 0.82) 45%,
    rgba(143, 47, 28, 0.45) 100%
  ); /* @kind color */

  /* ---- Semantic aliases ---- */
  --bg-page: var(--paper);
  --bg-card: var(--raised);
  --bg-panel: var(--sand);
  --bg-dark: var(--ink);
  --bg-accent: var(--color-vermilion);

  --text-strong: var(--ink);
  --text-body: var(--ink-body);
  --text-secondary: var(--ink-secondary);
  --text-caption: var(--ink-caption);
  --text-nav: var(--ink-nav);

  --accent: var(--color-vermilion);
  --accent-hover: var(--color-press);
  --accent-on-dark: var(--color-ember);

  --link: var(--color-vermilion);
  --border: var(--hairline-divider);
}