/* The kit's tokens (issue 119, first slice). Every color, type size, space, radius, border and
   shadow the kit and Home use is named here once; kit.css and home.css hold no raw color or font-size
   (tests/kit-lint.test.mjs enforces it).

   Two kinds of color role:
   - Brand roles are the same in every theme and every page background: the green hero, its gold
     accent, the overlay that sits on cover art.
   - Neutral roles borrow the reader's chosen page background (--paper, --sheet, --ink and so on,
     set by styles.css and background.js), so a neutral card follows light, dark and every palette. */
:root {
  /* Brand */
  --k-primary: #183d32;
  --k-primary-deep: #112f26;
  --k-primary-lift: #1d4a3c;
  --k-lit: #e6c987;
  --k-ivory: #fbf8ef;
  --k-night: #1a2c24;
  --k-hero: linear-gradient(
    172deg,
    var(--k-primary-deep),
    var(--k-primary) 55%,
    var(--k-primary-lift)
  );

  /* Text and lines that sit on a brand surface (hero, art-led cards) */
  --k-on-primary: var(--k-ivory);
  --k-on-primary-soft: #dfe8e0;
  --k-on-primary-quiet: #c3d1c7;
  --k-on-primary-label: #cfdad2;
  --k-on-primary-hair: rgba(251, 248, 239, 0.3);
  --k-on-primary-line: rgba(251, 248, 239, 0.5);
  --k-on-primary-fill: rgba(251, 248, 239, 0.08);
  --k-on-primary-edge: rgba(251, 248, 239, 0.2);
  --k-lit-fill: rgba(230, 201, 135, 0.24);
  --k-lit-fill-soft: rgba(230, 201, 135, 0.18);

  /* The overlay every art-led card shares, so each keeps its hue and they read as a set */
  --k-scrim: linear-gradient(
    100deg,
    rgba(10, 28, 22, 0.93) 0%,
    rgba(10, 28, 22, 0.76) 55%,
    rgba(10, 28, 22, 0.56) 100%
  );
  --k-cover-fade: linear-gradient(rgba(10, 28, 22, 0.82), rgba(10, 28, 22, 0));
  --k-cover-ink: #f3dfaa;
  --k-cover-shadow: 0 14px 24px -14px rgba(10, 28, 22, 0.6);

  /* Neutral roles: follow the chosen page background */
  --k-page: var(--paper);
  --k-surface: var(--sheet);
  --k-surface-alt: var(--wash);
  --k-text: var(--ink);
  --k-text-quiet: var(--muted);
  --k-border: var(--line);
  --k-link: var(--accent);
  --k-action: var(--k-primary);
  --k-on-action: var(--k-ivory);
  --k-focus: var(--accent);

  /* Type: information is Heebo (--ui) in a small scale; words to say are in the prayer face */
  --k-font-ui: var(--ui);
  --k-font-prayer: Frank, HebrewFallback, 'Times New Roman', serif;
  --k-fs-2xs: 11px;
  --k-fs-xs: 12px;
  --k-fs-sm: 13px;
  --k-fs-note: 13.5px;
  --k-fs-body: 14px;
  --k-fs-row: 14.5px;
  --k-fs-md: 15px;
  --k-fs-lg: 16px;
  --k-fs-xl: 20px;
  --k-fs-2xl: 22px;
  --k-fs-3xl: 26px;
  --k-fs-4xl: 28px;
  --k-fs-5xl: 30px;
  --k-fs-6xl: 32px;
  --k-fs-display: 36px;
  --k-fs-numeral-sm: 40px;
  --k-fs-numeral-md: 56px;
  --k-fs-numeral: 58px;
  --k-fs-numeral-lg: 72px;
  --k-fs-cover: 13.5cqw;
  --k-lh-tight: 1;
  --k-lh-snug: 1.2;
  --k-lh-body: 1.4;
  --k-lh-prayer: 1.3;
  --k-fw-regular: 400;
  --k-fw-medium: 500;
  --k-fw-semibold: 600;
  --k-fw-bold: 700;

  /* Space, radius, border, touch, elevation */
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 20px;
  --k-space-6: 24px;
  --k-space-8: 32px;
  --k-pad: 22px;
  --k-gap: 16px;
  --k-radius-card: 20px;
  --k-radius-in: 12px;
  --k-radius-tile: 8px;
  --k-radius-pill: 999px;
  --k-border-width: 1px;
  --k-touch: 44px;
  --k-page-max: 1392px;
  --k-ease: 0.18s;
}
@media (max-width: 700px) {
  :root {
    --k-pad: 18px;
    --k-gap: 10px;
    --k-radius-card: 18px;
  }
}
/* On dark pages the primary action turns gold, as the page accent turns light. */
:root[data-theme='dark'] {
  --k-action: var(--k-lit);
  --k-on-action: var(--k-night);
}