/* Design tokens: the PorchOS token contract (DECISIONS #77), set to the Malaga Christian Center brand.
   Brand source: the live Total theme (cream base #f2f1e8, panels #d8d4c9 / #eae8d9 / #e0ded0, lavender accent #858ba5,
   tan buttons #d1b18b, footer brown #44332a, Playfair Display headings, Raleway in nav, buttons and footer).
   Audit: refs/malagachurch/pre-build-audit.md sections 3, 5 and 6. Contrast (Nolan, 13 Nov 2026, question 8):
   lavender darkened to #5d6383 for text and buttons (white on it 5.87:1, it on cream 5.18:1); dark #2a2a2a text on tan
   (7.09:1). Body text stays the system font (Nolan: Raleway for body NO).
   - palette (--c-*): the only color literals in the theme;
   - roles (--color-*): jobs, each pointing at a palette color;
   - fonts (--font-*): the only place a font is named.
   Check: PorchOS tools/check-tokens.py <theme dir> (zero findings). */
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/raleway-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Raleway";
  src: url("fonts/raleway-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette ---------------------------------------------------------- */
  --c-ink: #2a2a2a;      /* headings, text on tan (approved: dark text on tan 7.09:1) */
  --c-text: #424242;     /* body text (live: #424242) */
  --c-paper: #ffffff;
  --c-cream: #f2f1e8;    /* page base (live body background) */
  --c-sand: #eae8d9;     /* pale tan band (live mission and tile band) */
  --c-linen: #e0ded0;    /* tile text panels (live) */
  --c-stone: #d8d4c9;    /* page header panel (live) */
  --c-tan: #d1b18b;      /* tan buttons (live), secondary action */
  --c-lavender: #5d6383; /* live accent #858ba5, darkened as approved (13 Nov) */
  --c-brown: #44332a;    /* footer (live) */
  --c-red: #a8322a;      /* form errors and required marks only */

  /* ---- Roles ------------------------------------------------------------ */
  --color-surface-1: var(--c-cream);
  --color-surface-2: var(--c-sand);
  --color-surface-3: var(--c-brown);
  --color-band: var(--c-brown);
  --color-on-band: var(--c-cream);
  --color-text-1: var(--c-ink);
  --color-text-2: var(--c-text);
  --color-text-3: color-mix(in srgb, var(--c-text) 85%, var(--c-cream));
  --color-accent: var(--c-lavender);
  --color-on-accent: var(--c-paper);
  --color-accent-hover: color-mix(in srgb, var(--c-lavender) 78%, var(--c-ink));
  --color-accent-active: color-mix(in srgb, var(--c-lavender) 62%, var(--c-ink));
  --color-secondary: var(--c-tan);
  --color-on-secondary: var(--c-ink);
  --color-secondary-hover: color-mix(in srgb, var(--c-tan) 82%, var(--c-ink));
  --color-secondary-active: color-mix(in srgb, var(--c-tan) 70%, var(--c-ink));
  --color-label: color-mix(in srgb, var(--c-lavender) 85%, var(--c-ink)); /* small labels: 4.5:1 or more on linen tiles too */
  --color-link: var(--c-lavender);
  --color-link-hover: var(--c-ink);
  --color-border: color-mix(in srgb, var(--c-ink) 16%, transparent);
  --color-border-strong: color-mix(in srgb, var(--c-ink) 45%, var(--c-paper));
  --color-rule: color-mix(in srgb, var(--c-ink) 18%, transparent);
  --color-focus: var(--c-lavender);
  --color-focus-on-band: var(--c-tan);
  --color-error: var(--c-red);
  --color-success: var(--c-lavender);
  --color-panel: var(--c-stone);
  --color-tile: var(--c-linen);
  --color-card: var(--c-paper);
  --color-mark: var(--c-ink);                                                   /* logo watermark colour (shown at 7%) */
  --color-rule-on-band: color-mix(in srgb, var(--c-cream) 22%, transparent);
  --color-header-rule: color-mix(in srgb, var(--c-ink) 12%, transparent);
  --shadow-header: 0 2px 10px rgb(0 0 0 / 0.08);
  --shadow-menu: 0 12px 24px rgb(0 0 0 / 0.14);
  --shadow-card: 0 10px 28px rgb(42 42 42 / 0.16);

  /* ---- Type (audit section 5; phone value at 390 px, desktop value from 1200 px up) */
  --fs-display: clamp(2rem, 1.5788rem + 1.7284vw, 2.875rem);       /* H1 32 -> 46 px */
  --lh-display: clamp(2.375rem, 1.9538rem + 1.7284vw, 3.25rem);    /* 38 -> 52 px */
  --fs-h2: clamp(1.625rem, 1.3843rem + 0.9877vw, 2.125rem);        /* 26 -> 34 px */
  --lh-h2: clamp(2rem, 1.6991rem + 1.2346vw, 2.625rem);            /* 32 -> 42 px */
  --fs-h3: clamp(1.25rem, 1.1898rem + 0.2469vw, 1.375rem);         /* 20 -> 22 px */
  --lh-h3: clamp(1.625rem, 1.5648rem + 0.2469vw, 1.75rem);         /* 26 -> 28 px */
  --fs-lead: clamp(1.125rem, 1.0949rem + 0.1235vw, 1.1875rem);     /* 18 -> 19 px */
  --lh-lead: clamp(1.75rem, 1.6898rem + 0.2469vw, 1.875rem);       /* 28 -> 30 px */
  --fs-body: clamp(1rem, 0.9699rem + 0.1235vw, 1.0625rem);         /* 16 -> 17 px */
  --lh-body: clamp(1.625rem, 1.5648rem + 0.2469vw, 1.75rem);       /* 26 -> 28 px */
  --fs-small: 0.875rem;  /* 14 px */
  --lh-small: 1.3125rem; /* 21 px */
  --fs-ui: 0.9375rem;    /* nav and buttons 15 px */
  --lh-ui: 1.25rem;      /* 20 px */
  --lh-heading: 1.2;
  --measure: 66ch;
  --measure-lead: 46ch;

  /* ---- Buttons, headings, links ---------------------------------------- */
  --btn-height: 2.875rem; /* 46 px (audit section 5) */
  --btn-radius: 0.375rem; /* = --radius, one radius site-wide (6 px) */
  --btn-pad-x: 1.375rem;  /* 22 px */
  --heading-weight: 600;
  --heading-transform: none;
  --heading-tracking: 0em;
  --ui-transform: none;
  --ui-tracking: 0.0125rem; /* 0.2 px */
  --link-decoration: underline;

  /* ---- Fonts ------------------------------------------------------------ */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ui: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, monospace;

  /* ---- Scales (8, 16, 24, 32, 48, 64, 96) ------------------------------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-pad: clamp(3rem, 2.0370rem + 3.9506vw, 6rem);   /* large: 48 -> 96 px */
  --section-pad-md: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);    /* medium: 40 -> 64 px */
  /* Layout settings: Porch Core Design (PORCH-WO-59). Today's values; Core prints new --porch-page-width and
     --porch-header-inset only when one of these changes in Customize > Design. */
  --page-width-mode: fixed;
  --content-width: 75rem; /* 1200 px */
  --content-fluid: 90%;   /* the share when Page width style is Wide (not used while Fixed) */
  --text-width: 47.5rem;  /* 760 px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-edge: content;
  --header-gutter: 1.5rem;   /* used when Header edge is window */
  --porch-page-width: min(100% - 2 * var(--gutter), var(--content-width));
  --porch-header-inset: calc((100% - var(--porch-page-width)) / 2);
  --page-inset: calc((100% - var(--porch-page-width, min(100% - 2 * var(--gutter), var(--content-width)))) / 2); /* the space beside the page */
  --radius: 0.375rem;     /* one radius, whole site: 6 px */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-height: 5rem;  /* 80 px desktop; 72 px phone (site.css) */

  /* ---- Form controls: one shared set (PORCH_RULES "Form controls match") */
  --porch-control-height: 3rem;
  --porch-control-pad-x: 1rem;
  --porch-control-border: 1px solid var(--color-border-strong);
  --porch-control-radius: var(--radius);
  --porch-control-bg: var(--c-paper);
  --porch-control-font: 400 1rem/1.4 var(--font-body);
  --porch-control-color: var(--color-text-1);
  --porch-control-placeholder: var(--color-text-3);
  --field-padding-x: var(--porch-control-pad-x);
  --select-chevron-size: 0.4rem;
  --select-chevron-gap: 0.5rem;
}