/* Chase Family Church brand tokens, 2026. Names and values match the
   Chase Hub page kit, so the website, Hub and MyCFC share one look.
   Source: Chase-brand-guidelines-2026.pdf and Chase-colour-palette-2026.pdf
   (OneDrive: Media/Website/2026/chase-hub-mycfc-logos-2026).
   Balance: about 60% paper or white, 25% navy, 10% orange, 5% one supporting colour. */
:root {
  /* core */
  --navy: #0C4062;
  --navy-deep: #0A2F4A;
  --orange: #E58A1F;          /* buttons, highlights, accents on navy */
  --orange-text: #A85A0C;     /* orange text on paper/white (5.1:1) */
  --paper: #F3F1EA;
  --white: #FFFFFF;

  /* supporting: one per piece */
  --sky: #7DB7DD;
  --teal: #1F7A80;
  --sunflower: #F2BE4A;
  --clay: #B94E2E;
  --berry: #8C3B5E;
  --leaf: #437F4C;

  /* neutrals */
  --ink-dark: #1B2733;
  --slate: #4E6A85;
  --mist: #C3D4E3;
  --sand: #E6DCC6;

  /* semantic tokens, light (default: paper page) */
  --surface: var(--paper);
  --surface-raised: var(--white);
  --heading: var(--navy-deep);
  --ink: var(--ink-dark);
  --ink-muted: var(--slate);
  --accent: var(--orange);
  --accent-text: var(--orange-text);
  --on-accent: var(--navy-deep); /* never white on orange */
  --line: var(--sand);
  --focus: var(--navy);
  --tint: var(--orange);         /* the page's supporting colour, for stripes and badges */
  --on-tint: var(--navy-deep);   /* text on --tint: deep navy on orange, sunflower, sky */

  --font-body: "Outfit", Arial, sans-serif;
  --font-hand: "Caveat", cursive;

  /* ministry colours: same as Chase Hub, MyCFC, emails and event images.
     Identity only (a stripe, dot or tile), never status. */
  --sunday: var(--navy);
  --kids: var(--sunflower);
  --youth: var(--clay);
  --prayer: var(--berry);
  --community: var(--leaf);
  --groups: var(--teal);
  --toddlers: var(--sky);

  /* shape and space: same scale as the Chase Hub page kit (kit.css) */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-pill: 999px;
  --shadow: 0 10px 30px rgba(10, 47, 74, .10);

  --content-width: 1240px;
  --measure: 32em;
}

/* Dark grounds: header, heroes, navy bands, footer. Components inside read
   the same semantic tokens, so they flip without their own dark variants. */
.site-header, .hero, .ip-hero, .hero-split, .page-head, .ip-band--navy-mid, footer, [data-theme="navy"], .panel--dark, .ip-photo figcaption {
  --surface: var(--navy-deep);
  --surface-raised: var(--navy);
  --heading: var(--white);
  --ink: var(--paper);
  --ink-muted: var(--mist);
  --accent-text: var(--orange);  /* 4.1:1 on navy: large text and labels only */
  --line: rgba(195, 212, 227, .22);
  --focus: var(--orange);
  color: var(--ink);
}

/* One supporting colour per page (set on <body> by layout.js) */
.t-sunday { --tint: var(--sunday); --on-tint: var(--white); }
.t-kids { --tint: var(--kids); }
.t-youth { --tint: var(--youth); --on-tint: var(--white); }
.t-prayer { --tint: var(--prayer); --on-tint: var(--white); }
.t-community { --tint: var(--community); --on-tint: var(--white); }
.t-groups { --tint: var(--groups); --on-tint: var(--white); }
.t-toddlers { --tint: var(--toddlers); }