:root{
  /* ---------------------------------------------------------- type */
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---------------------------------------------------------- light base
     White, airy base with a faint cool glass tint. Nothing here is heavy:
     surfaces stay white, separation comes from hairlines and space. */
  --color-background:#ffffff;
  --color-surface:#ffffff;
  --color-surface-soft:#f7fafb;
  --color-glass:#eef4f7;
  --color-glass-deep:#dbe8ee;

  --color-ink:#141416;
  --color-muted:#5f666d;
  --color-line:#e8ecef;
  --color-line-strong:#d7dee2;

  /* ---------------------------------------------------------- brand
     The KINGHOME trademark is red. Its four values are named once here and the
     shared accent slots below point at them, so a change of brand red is a
     change to this block and to nothing else.

       red        the mark's own red — buttons, CTA, links, labels, focus
       hover      hover and pressed state of anything red
       deep       a deeper red, held back for small emphasis
       soft       the pale red the dark bands take as a tint */
  --kinghome-red:#c91f2d;
  --kinghome-red-hover:#a91622;
  --kinghome-red-deep:#87131c;
  --kinghome-red-soft:#fdeee9;

  /* ---------------------------------------------------------- accent
     The brand red is the only strong colour: buttons, links, numbers, focus. */
  --color-accent:var(--kinghome-red);
  --color-accent-soft:var(--kinghome-red-soft);
  --color-accent-deep:var(--kinghome-red-hover);
  --color-focus:var(--kinghome-red);
  /* The small heading (eyebrow) and every small-caps label around it are one
     colour across the site — the brand red the home page and the site chrome
     already use — so a label over a dark band reads like one on white. */
  --color-label:var(--gh-accent);

  /* ---------------------------------------------------------- black blocks
     Used as a flat, confident block — never as a heavy full-page weight. */
  --color-dark:#16191d;
  --color-dark-ink:#f4f6f8;
  --color-dark-muted:#a2abb4;
  --color-dark-line:#2e3339;

  /* ---------------------------------------------------------- legacy slots
     Kept so the labelled image placeholders keep working until real
     photography replaces the illustrations. */
  --color-placeholder:#f2f6f8;
  --color-placeholder-ink:#a9b4bb;
  --color-beige:#f6f3ec;
  --color-beige-ink:#8a8168;

  /* ---------------------------------------------------------- shape */
  --radius-control:10px;
  --radius-card:18px;
  --radius-pill:999px;
  /* Buttons are square across the site: the home and About designs set that
     treatment, so the shared .btn and the pagination controls follow it too. */
  --radius-button:0;
  --wrap:1180px;

  /* light, wide shadows — depth without weight */
  --shadow-soft:0 1px 2px rgba(14,17,20,.04),0 18px 40px -32px rgba(14,17,20,.28);
  --shadow-lift:0 2px 6px rgba(14,17,20,.05),0 30px 60px -36px rgba(14,17,20,.32);

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:64px;
  --space-6:96px;
  --space-7:132px;
}