/* Pastorly design tokens. The only place raw values live.
   Every screen, component and email template is built from these.
   Standard: docs/design-rules.md and docs/Software-Design-Standard.pdf.
   Neutral palette: white ground, black text and headers, one orange accent used only for the action.
   Fonts are the church's licensed brand fonts, served for this church's deployment only. */

@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/fonts/source-sans-pro-600.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Heading Compressed Pro";
  src: url("/fonts/heading-compressed-light.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Heading Compressed Pro";
  src: url("/fonts/heading-compressed-bold.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Blacker Text";
  src: url("/fonts/blacker-text-bold-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Color: true neutrals. No brown, cream or tinted grays. */
  --ground: #ffffff;        /* page */
  --surface: #f5f5f5;       /* quiet panels, hover fills, table headers */
  --surface-2: #ffffff;     /* cards, inputs, raised */
  --ink: #111111;           /* primary text and headers */
  --ink-2: #3d3d3d;         /* secondary text */
  --ink-3: #595959;         /* tertiary text, 7:1 on white. Lowest allowed text color. */
  --rule: #e2e2e2;          /* hairlines */
  --rule-strong: #111111;   /* section rules */
  --border-control: #8a8a8a;/* input and control borders, 3.4:1 */

  /* Dark surfaces: sidebar, tab bar, marketing hero */
  --dark: #111111;
  --dark-2: #262626;
  --dark-rule: #333333;
  --on-dark: #ffffff;
  --on-dark-2: #e4e4e4;

  /* Accent: used only for the primary action, the active nav marker and counts. */
  --brand: #c74717;
  --brand-hover: #a63a12;
  --brand-soft: #fbe9e1;
  --on-brand: #ffffff;

  /* Status. Each has a strong (text) and soft (fill) pair, always with a word or dot. */
  --ok: #2f5d3a;
  --ok-soft: #e1eddf;
  --candle: #7a4a06;        /* requested, needs attention */
  --candle-soft: #f8e9c8;
  --clay: #a13a2a;          /* destructive, declined, errors */
  --clay-soft: #f6e1db;
  --slate: #34506b;         /* informational, completed */
  --slate-soft: #dde7ef;
  --focus: #1d6fd1;

  /* Type */
  --font-display: "Heading Compressed Pro", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-accent: "Blacker Text", Georgia, serif;
  --text-xs: 0.75rem;       /* 12: labels, badges */
  --text-sm: 0.875rem;      /* 14: dense UI, tables */
  --text-base: 1rem;        /* 16: body, inputs (no iOS zoom) */
  --text-lg: 1.25rem;       /* 20 */
  --text-xl: 1.5rem;        /* 24 */
  --text-2xl: 2rem;         /* 32 */
  --text-3xl: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);   /* page titles, display face */
  --text-display: clamp(3rem, 1.2rem + 6.4vw, 6rem);  /* marketing hero only */
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.5;
  --measure: 62ch;

  /* Space: 4px base. Use only these. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape */
  --radius-sm: 6px;         /* controls */
  --radius: 8px;            /* cards, panels, modals */
  --radius-tag: 4px;        /* badges and tags */
  --radius-round: 999px;    /* avatars, toggles, count bubbles only */
  --control-h: 2.75rem;     /* 44px touch floor */

  /* Elevation: hairlines first; shadow only for things that float */
  --shadow-float: 0 -1px 0 var(--rule), 0 -8px 24px -12px rgba(0, 0, 0, 0.2);
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 32px -8px rgba(0, 0, 0, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  /* Layout */
  --page-narrow: 40rem;
  --page: 60rem;
  --page-wide: 80rem;
  --rail-w: 17rem;
  --tabbar-h: 4rem;
  --gutter: var(--space-4);
}

@media (min-width: 48rem) {
  :root { --gutter: var(--space-6); }
}