/* Design tokens: the PorchOS token contract (DECISIONS #77), set to the Christmas at Bethlehem Inn brand.
   Brand source: the live Total child theme (accent #78cdd2, teal bands #5a9b9f, badge red #ed524a, pale aqua tint,
   Sen headings). MIG-WO-2 audit: inventory/mig-wo-2/AUDIT.md. Teal and red are darkened only as far as WCAG AA needs
   for white text on them; the aqua stays exactly the brand value.
   - palette (--c-*): the only color literals in the theme (theme.json repeats them for the editor palette);
   - 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: "Sen";
  src: url("fonts/sen-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette ---------------------------------------------------------- */
  --c-ink: #222222;    /* headings (live: #222222) */
  --c-text: #343f40;   /* body text (live: #616161; MIG-WO-2c C12.6: audit Finishing 7, near #343F40) */
  --c-paper: #ffffff;
  --c-aqua: #78cdd2;   /* brand accent, logo aqua (live accent_color) */
  --c-teal: #3f7a7e;   /* bands (live #5a9b9f, darkened: white text 4.9:1) */
  --c-teal-ink: #28666b; /* links on white (MIG-WO-2c C12.5: audit Finishing 6) */
  --c-line: #d8e3e2;   /* pale teal-gray panel border (MIG-WO-2c C12.3: audit Finishing 4) */
  --c-tint: #edfafc;   /* pale aqua tint (live rgba(219,246,249,.5) on white) */
  --c-red: #c93a33;    /* "The Clock is Ticking" badge (live #ed524a, darkened: 5.1:1) */
  --c-night: #2b3a3d;  /* header band and hero shade (live: dark photo overlay) */

  /* ---- Roles ------------------------------------------------------------ */
  --color-surface-1: var(--c-paper);
  --color-surface-2: var(--c-tint);
  --color-surface-3: var(--c-night);
  --color-band: var(--c-teal);
  --color-on-band: var(--c-paper);
  --color-text-1: var(--c-ink);
  --color-text-2: var(--c-text);
  --color-text-3: color-mix(in srgb, var(--c-text) 80%, var(--c-paper));
  --color-accent: var(--c-aqua);
  --color-on-accent: var(--c-ink);
  --color-accent-hover: color-mix(in srgb, var(--c-aqua) 82%, var(--c-ink));
  --color-link: var(--c-teal-ink);
  --color-link-hover: var(--c-ink);
  --color-badge: var(--c-red);
  --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-focus: var(--c-teal-ink);
  --color-error: var(--c-red);
  --color-success: var(--c-teal-ink);
  --color-shade: color-mix(in srgb, var(--c-night) 78%, transparent);
  --color-shade-light: color-mix(in srgb, var(--c-night) 18%, transparent); /* B1: photo half of the hero */
  --color-rule-on-band: color-mix(in srgb, var(--c-paper) 22%, transparent);   /* thin lines on dark and teal */
  /* MIG-WO-2c roles (all from palette colours) */
  --color-header-rule: color-mix(in srgb, var(--c-paper) 12%, transparent);   /* C2.5 header bottom border, white 12% */
  --color-panel-border: var(--c-line);                                         /* C7.3, C12.3 steps panel */
  --color-label: color-mix(in srgb, var(--c-red) 82%, var(--c-ink));           /* C9.1 muted dark red text */
  --color-focus-on-dark: var(--c-aqua);                                         /* C12.9 focus on night */
  --color-focus-on-band: var(--c-paper);                                        /* C12.9 focus on teal (aqua is under 3:1 there) */
  --color-cta-strong: var(--c-teal-ink);                                        /* C10.2 dark teal button on aqua */
  --color-cta-strong-hover: color-mix(in srgb, var(--c-teal-ink) 80%, var(--c-ink));
  --color-accent-active: color-mix(in srgb, var(--c-aqua) 66%, var(--c-ink));   /* C12.8 pressed fill */
  --color-band-tint: color-mix(in srgb, var(--color-band) 93%, transparent);    /* C5.2 pattern at about 7% */
  --color-paper-tint: color-mix(in srgb, var(--c-paper) 93%, transparent);     /* MIG-WO-2d F2 steps band: the same pattern at about 7% on white */
  --shadow-cover: 0 8px 20px rgb(0 0 0 / 0.16);   /* C1.4 script cover (audit Finishing 5) */
  --shadow-cover-lift: drop-shadow(0 18px 28px rgb(0 0 0 / 0.42)) drop-shadow(0 4px 8px rgb(0 0 0 / 0.28)); /* MIG-WO-2d hero B: cover over the seam */
  --shadow-header: 0 2px 10px rgb(0 0 0 / 0.08);  /* C2.6 header after scroll */
  --shadow-menu: 0 12px 24px rgb(0 0 0 / 0.18);   /* C2.8 open phone menu */

  /* ---- Type (MIG-WO-2c C3: audit "Type specification"; phone value at 390 px, desktop value from 1200 px up) */
  --fs-display: clamp(1.875rem, 1.5741rem + 1.2346vw, 2.5rem);   /* H1 30 -> 40 px */
  --lh-display: clamp(2.1875rem, 1.8565rem + 1.358vw, 2.875rem); /* 35 -> 46 px */
  --fs-h2: clamp(1.625rem, 1.4444rem + 0.7407vw, 2rem);          /* 26 -> 32 px */
  --lh-h2: clamp(2rem, 1.8194rem + 0.7407vw, 2.375rem);          /* 32 -> 38 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.7199rem + 0.1235vw, 1.8125rem);    /* 28 -> 29 px */
  --fs-body: clamp(1rem, 0.9699rem + 0.1235vw, 1.0625rem);       /* 16 -> 17 px */
  --lh-body: clamp(1.5625rem, 1.5023rem + 0.2469vw, 1.6875rem);  /* 25 -> 27 px */
  --fs-small: 0.875rem;  /* 14 px */
  --lh-small: 1.3125rem; /* 21 px */
  --fs-ui: 0.875rem;     /* nav and buttons 14 px */
  --lh-ui: 1.25rem;      /* 20 px */
  --fs-cta: clamp(1.5rem, 1.3796rem + 0.4938vw, 1.75rem);        /* final CTA heading 24 -> 28 px */
  --lh-cta: clamp(1.875rem, 1.7245rem + 0.6173vw, 2.1875rem);    /* 30 -> 35 px */
  --lh-heading: 1.15;
  /* Heading tracking per role, added to the editable --heading-tracking (the contract keeps that one at 0em or more). */
  --track-h1: clamp(-0.0375rem, -0.00972rem - 0.037vw, -0.01875rem); /* -0.3 -> -0.6 px */
  --track-h2: clamp(-0.025rem, -0.00648rem - 0.02469vw, -0.0125rem); /* -0.2 -> -0.4 px */
  --track-h3: -0.00625rem;                                           /* -0.1 px */
  --measure: 62ch;
  --measure-lead: 48ch;
  --measure-small: 65ch;

  /* ---- Buttons, headings, links ---------------------------------------- */
  --btn-height: 2.75rem; /* 44 px (C2.3) */
  --btn-radius: 0.375rem; /* = --radius, one radius site-wide (6 px, C12.2) */
  --btn-pad-x: 1.125rem; /* 18 px (C2.3) */
  --heading-weight: 700;
  --heading-transform: none;
  --heading-tracking: 0em;
  --ui-transform: uppercase;
  --ui-tracking: 0.03125rem; /* 0.5 px (C2.3, Ranked 2) */
  --nav-tracking: 0.01875rem; /* 0.3 px (C2.4) */
  --link-decoration: underline;

  /* ---- Fonts ------------------------------------------------------------ */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sen", 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(2.5rem, 1.5rem + 4.5vw, 6rem);    /* large: 40 -> 96 px */
  --section-pad-md: clamp(2.5rem, 1.9rem + 2.4vw, 4rem); /* medium: 40 -> 64 px (MIG-WO-2b B3) */
  /* 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: 72.5rem; /* 1160 px (C4.1) */
  --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 (C12.2) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- 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;
}