/* Chapel Pointe · Sunday Scorecard — design tokens.
   Light is the default; :root[data-theme="dark"] is the "Present" theme used for projecting.
   Venue colours and the score scale live in charts.css (see docs/SPEC.md §19). */

@font-face {
  font-family: "CP Century Gothic";
  src: url("/assets/fonts/century-gothic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* The middle dot in this cut has broken side-bearings; let "·" fall through to Jost. */
  unicode-range: U+0000-00B6, U+00B8-FFFF;
}

@font-face {
  /* A Heavy-weight subset — fine for short branded words, not for running text. */
  font-family: "CP Futura";
  src: url("/assets/fonts/futura-pt.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme-scope="light"] {
  color-scheme: light;

  /* ---- Surfaces & ink ----------------------------------------------------------------
     Elevation steps, low → high: surface-sunken (tracks, wells) · bg (page) · surface (cards)
     · surface-2 (insets, hover) · surface-raised (popovers, menus, drawers, modals). */
  --bg: #F4F1EC;
  --surface: #FDFCFA;
  --surface-2: #F8F5F0;
  --surface-sunken: #EFEBE4;
  --surface-raised: #FFFFFF;
  --surface-raised-2: #F8F5F0;   /* insets inside a raised overlay */
  --surface-tone: #FDFCFA;       /* a hero / tone card (one step up in Present) */
  /* The page-level card colour and its inset. Unlike --surface / --surface-2, overlays never remap
     these, so a preview inside a drawer can draw a card exactly as the page does. */
  --surface-card: #FDFCFA;
  --surface-card-2: #F8F5F0;
  --ink: #1E1A18;
  --ink-2: #57504B;
  --muted: #736B64;
  --hairline: #E6E0D8;
  --line-strong: #CFC7BD;

  /* ---- Brand & accents ----------------------------------------------------------------- */
  --brand: #372E2C;
  --brand-hover: #4A3F3C;
  --on-brand: #FFFFFF;
  --bronze: #A7792F;
  --bronze-ink: #886124;
  --bronze-badge: #966C2A;
  --bronze-badge-ring: transparent;
  --on-bronze: #FFFFFF;
  --bronze-soft: #F3EADB;
  --bronze-line: #D9C4A0;
  --clay: #B5543A;
  --clay-ink: #A44A32;
  --clay-soft: #F6E4DC;
  --slate: #3C4F68;
  --slate-soft: #E6EBF1;
  --focus: #3C4F68;

  /* ---- Washes, scrims, selection ------------------------------------------------------- */
  --wash: rgba(55, 46, 44, 0.045);
  --wash-strong: rgba(55, 46, 44, 0.085);
  --scrim: rgba(30, 26, 24, 0.30);
  /* Text selection: a neutral warm-ink wash — readable, never a brown/olive slab. */
  --selection: rgba(55, 46, 44, 0.14);
  --header-glass: rgba(244, 241, 236, 0.82);
  /* The soft light at the top of a hero / "This Sunday" card (a bronze wash on paper). */
  --tone-glow: color-mix(in srgb, #F3EADB 70%, transparent);

  /* ---- Component tokens (so Present can tune each one) ---------------------------------- */
  --input-bg: #F8F5F0;
  --input-bg-focus: #FDFCFA;
  --input-border: #E6E0D8;
  --primary-disabled-bg: rgba(55, 46, 44, 0.10);
  --primary-disabled-ink: rgba(55, 46, 44, 0.78);
  --primary-disabled-line: rgba(55, 46, 44, 0.06);
  --tooltip-bg: #1E1A18;
  --tooltip-ink: #F4F1EC;
  --toast-bg: #1E1A18;
  --toast-ink: #F4F1EC;
  --toast-line: transparent;
  --toast-success: #A9BEDB;
  --toast-attention: #E7A086;
  --toast-info: #D9C4A0;
  --switch-thumb: #FDFCFA;
  --avatar-hairline: rgba(30, 26, 24, 0.10);
  --photo-filter: none;
  --edge-highlight: rgba(255, 255, 255, 0.7);

  /* ---- Elevation (almost none) ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(30, 26, 24, 0.04);
  --shadow-md: 0 1px 2px rgba(30, 26, 24, 0.04), 0 4px 14px -6px rgba(30, 26, 24, 0.10);
  --shadow-lg: 0 2px 6px rgba(30, 26, 24, 0.05), 0 24px 56px -18px rgba(30, 26, 24, 0.28);
  --shadow-inset: inset 0 1px 2px rgba(30, 26, 24, 0.045);

  /* ---- Type ---------------------------------------------------------------------------- */
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans: "Jost", Futura, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-brand: "CP Century Gothic", "Century Gothic", "Jost", Futura, sans-serif;
  --font-brand-heavy: "CP Futura", "Futura PT", Futura, "Jost", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --type-scale: 1;
  --fs-11: calc(11px * var(--type-scale));
  --fs-12: calc(12px * var(--type-scale));
  --fs-13: calc(13px * var(--type-scale));
  --fs-14: calc(14px * var(--type-scale));
  --fs-15: calc(15px * var(--type-scale));
  --fs-16: calc(16px * var(--type-scale));
  --fs-18: calc(18px * var(--type-scale));
  --fs-20: calc(20px * var(--type-scale));
  --fs-24: calc(24px * var(--type-scale));
  --fs-32: calc(32px * var(--type-scale));
  --fs-44: calc(44px * var(--type-scale));
  --fs-56: calc(56px * var(--type-scale));

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --tracking-display: -0.012em;
  --tracking-caps: 0.14em;

  /* Type roles (base.css .t-*). Newsreader is for titles only — always upright. Everything people
     read as text is Jost at a comfortable size. See docs/FRONTEND.md §2 "Type roles". */
  --fs-display: var(--fs-56);                    /* hero titles, the big Sunday date headline */
  --fs-title: var(--fs-44);                      /* page title (h1) */
  --fs-section: var(--fs-24);                    /* section / drawer / modal titles (h2–h3) */
  --fs-card-title: var(--fs-20);                 /* card titles, empty-state titles (h3–h4) */
  --fs-lede: calc(17px * var(--type-scale));     /* intro under a title */
  --fs-body: var(--fs-15);                       /* running text */
  --fs-comment: var(--fs-16);                    /* notes, reflections, quotes */
  --fs-help: calc(14.5px * var(--type-scale));   /* help under a question */
  --fs-meta: var(--fs-13);                       /* bylines, timestamps, captions */
  --lh-lede: 1.55;
  --lh-comment: 1.6;
  --lh-help: 1.45;
  --measure: 64ch;                               /* max line length for ledes */

  /* Avatars — xs 24 · sm 32 · md 44 · lg 64 · xl 112 (see FRONTEND.md "People"). */
  --avatar-xs: 24px;
  --avatar-sm: 32px;
  --avatar-md: 44px;
  --avatar-lg: 64px;
  --avatar-xl: 112px;

  /* ---- Space, shape, layout ------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-input: 8px;
  --radius-card: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --content-max: 1280px;
  --gutter: 32px;
  --header-h: 64px;

  /* ---- Motion -------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- Stacking ------------------------------------------------------------------------ */
  --z-sticky: 20;
  --z-header: 50;
  --z-drawer: 90;
  --z-modal: 100;
  --z-popover: 105;  /* above drawers/modals: menus and pickers open from inside them */
  --z-gate: 110;
  --z-toast: 120;
  --z-tooltip: 130;
}

/* "Present" — a well-lit room at night: near-neutral charcoal with only a whisper of warmth,
   real elevation steps (page → card → inset → popover), warm off-white ink and primary,
   champagne gold reserved for kickers, badges and thin rules (never a large fill).
   Every text pair is ≥ 4.5:1 — the numbers are in docs/FRONTEND.md §2. */
/* [data-theme-scope="dark" | "light"] lets /styleguide show a Present panel beside a light one
   (colours; a scoped Present panel keeps the page's type sizes). Pages never use it. */
:root[data-theme="dark"],
[data-theme-scope="dark"] {
  color-scheme: dark;

  --bg: #0E0E0D;
  --surface: #171716;
  --surface-2: #1F1F1D;
  --surface-sunken: #121211;
  --surface-raised: #232321;
  --surface-raised-2: #282826;
  --surface-tone: #1F1F1D;
  --surface-card: #171716;
  --surface-card-2: #1F1F1D;
  --ink: #F3F0EA;
  --ink-2: #BDB8B0;
  --muted: #95908A;
  /* Translucent lines take their tone from whatever surface they sit on. */
  --hairline: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --brand: #F3F0EA;
  --brand-hover: #FFFFFF;
  --on-brand: #141413;
  --bronze: #CDAE78;
  --bronze-ink: #D9BE8C;
  --bronze-badge: rgba(214, 186, 138, 0.23);   /* filled must read stronger than the 28% to-do ring */
  --bronze-badge-ring: rgba(214, 186, 138, 0.40);
  --on-bronze: #E6D0A4;
  --bronze-soft: rgba(214, 186, 138, 0.10);
  --bronze-line: rgba(214, 186, 138, 0.28);
  --clay: #E07F62;
  --clay-ink: #E8896B;
  --clay-soft: rgba(224, 127, 98, 0.14);
  --slate: #A8C1E6;
  --slate-soft: rgba(168, 193, 230, 0.12);
  --focus: #A8C1E6;

  --wash: rgba(255, 255, 255, 0.045);
  --wash-strong: rgba(255, 255, 255, 0.085);
  --scrim: rgba(4, 4, 4, 0.62);
  --selection: rgba(243, 240, 234, 0.18);
  --header-glass: rgba(14, 14, 13, 0.72);
  /* Lit from above — a neutral lift, not a tint (warm tints read brown on charcoal). */
  --tone-glow: rgba(255, 255, 255, 0.035);

  --input-bg: #121211;
  --input-bg-focus: #121211;
  --input-border: rgba(255, 255, 255, 0.13);
  --primary-disabled-bg: rgba(243, 240, 234, 0.14);
  --primary-disabled-ink: rgba(243, 240, 234, 0.66);
  --primary-disabled-line: rgba(243, 240, 234, 0.10);
  --tooltip-bg: #2B2B29;
  --tooltip-ink: #F3F0EA;
  --toast-bg: #262624;
  --toast-ink: #F3F0EA;
  --toast-line: rgba(255, 255, 255, 0.10);
  --toast-success: #A8C1E6;
  --toast-attention: #E8896B;
  --toast-info: #D9BE8C;
  --switch-thumb: #CFCAC2;
  --avatar-hairline: rgba(255, 255, 255, 0.12);
  --photo-filter: brightness(0.94) saturate(0.96);
  --edge-highlight: rgba(255, 255, 255, 0.06);

  /* On charcoal, elevation comes from the surface step and a hairline; shadows only add a
     faint top highlight and, for overlays, a deep soft drop. */
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 28px 72px -18px rgba(0, 0, 0, 0.85);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  /* "Present" reads a touch larger on a projector. */
  --type-scale: 1.0625;
}

/* ---- Phones and tablets (ROUND5-CONTRACT §1) -----------------------------------------------
   Breakpoints, literal in every media query: phone ≤ 600px · tablet 601–1023px · desktop ≥ 1024px.
   Desktop keeps every value above. Below it the gutter narrows, the header row is shorter and the
   big type roles step down, so pages that use the roles (not raw --fs-44/56) fit without overrides. */
:root { --tap: 44px; }                           /* minimum tap-target height (used on phones) */
@media (max-width: 1023px) {
  :root { --gutter: 24px; }
}
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --header-h: 56px;
    --btn-h-md: 44px;                              /* .btn default / --sm / --xs heights (components.css) */
    --btn-h-sm: 36px;
    --btn-h-xs: 30px;
    --fs-display: calc(38px * var(--type-scale));
    --fs-title: calc(32px * var(--type-scale));
    --fs-section: calc(22px * var(--type-scale));
  }
}