/*
 * @file voxhearth-theme-tokens.css
 * @description Colour, type and spacing tokens for voxhearth.com. Light is primary; dark is a
 *   warm variant under prefers-color-scheme, not the near-black of developer tooling. Every
 *   colour used anywhere on the site is named here and nowhere else.
 *
 * @status Complete
 * @issues None
 * @todo None
 */

:root {
  color-scheme: light dark;

  /* Surfaces — warm paper, not white. The hearth is the whole idea. */
  --surface-page-color: #fbf6ee;
  --surface-raised-color: #ffffff;
  --surface-tinted-color: #f3ebdd;
  --surface-sunken-color: #ebe0cd;
  --surface-border-color: #ddceb5;

  /* Ink */
  --text-strong-color: #2c2318;
  --text-body-color: #4a3d2c;
  --text-muted-color: #6f6047;

  /* Accents */
  --accent-ember-color: #c05621;
  --accent-ember-strong-color: #9c4318;
  --accent-moss-color: #4f7a3f;
  --accent-sky-color: #35617e;

  /* Interaction */
  --focus-ring-color: #35617e;
  --link-color: #9c4318;
  --link-hover-color: #7a3311;

  /* The dashed status box. Deliberately loud — it marks what is not real yet. */
  --note-surface-color: #fdf3e0;
  --note-border-color: #d99b46;
  --note-text-color: #7a4c10;

  /* Illustration — the inline SVG scene has no external file to point at. */
  --illustration-sky-color: #dceaf0;
  --illustration-hill-far-color: #b9d2ae;
  --illustration-hill-near-color: #8fb87f;
  --illustration-soil-color: #a97f52;
  --illustration-stone-color: #b7ab98;
  --illustration-ember-color: #e0803a;

  /* Type. System stack only: no webfont, so nothing is fetched from anywhere. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-size-hero: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --text-size-heading: clamp(1.6rem, 1.2rem + 1.7vw, 2.25rem);
  --text-size-subheading: 1.2rem;
  --text-size-lede: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --text-size-body: 1rem;
  --text-size-small: 0.875rem;

  --line-height-tight: 1.18;
  --line-height-body: 1.65;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;

  --measure-page: 68rem;
  --measure-prose: 40rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-raised: 0 1px 2px rgba(44, 35, 24, 0.06), 0 8px 24px rgba(44, 35, 24, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page-color: #1c1813;
    --surface-raised-color: #262019;
    --surface-tinted-color: #221d16;
    --surface-sunken-color: #17130f;
    --surface-border-color: #3d342a;

    --text-strong-color: #f4ece0;
    --text-body-color: #ddd1bf;
    --text-muted-color: #a8977f;

    --accent-ember-color: #e08a4d;
    --accent-ember-strong-color: #f0a566;
    --accent-moss-color: #8cba76;
    --accent-sky-color: #7fb0cd;

    --focus-ring-color: #7fb0cd;
    --link-color: #e8a066;
    --link-hover-color: #f5bb8a;

    --note-surface-color: #2b2117;
    --note-border-color: #a5762f;
    --note-text-color: #e7bd7d;

    --illustration-sky-color: #26313a;
    --illustration-hill-far-color: #3d5738;
    --illustration-hill-near-color: #52774a;
    --illustration-soil-color: #6a4d31;
    --illustration-stone-color: #524a3f;
    --illustration-ember-color: #e08a4d;

    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}