/* ============================================================
   Hospito — design tokens
   ------------------------------------------------------------
   One source of truth for colour, type, spacing and elevation.
   Hospito Settings prints an inline :root block after this file,
   so every token here is a default the site owner can override.

   Two rules the rest of the CSS relies on:

   1. SPACING comes from the --hos-space-* scale. Nothing in the
      theme should invent its own margin value.
   2. TONE is explicit. A surface declares --hos-on-surface and
      its children inherit the correct text colour, which is why
      a heading can never end up navy-on-navy.
   ============================================================ */

:root {
	/* ---------- Brand ---------- */
	--hospito-primary: #16a34a;
	--hospito-primary-hover: #0f8a3c;
	--hospito-primary-light: #eaf7ef;
	--hospito-primary-soft: #cfe9d9;
	--hospito-secondary: #0a2540;
	--hospito-secondary-alt: #0d2e52;
	--hospito-deep: #071b33;
	--hospito-accent: #1d4ed8;
	--hospito-accent-light: #eef2ff;
	--hospito-mint: #5fe39b;

	/* ---------- Text ---------- */
	--hospito-heading: #0a2540;
	--hospito-text: #1f2937;
	--hospito-body: #46546f;
	--hospito-muted: #6b7280;
	--hospito-muted-2: #8590ab;
	--hospito-slate: #52607d;

	/* ---------- Surfaces ---------- */
	--hospito-background: #ffffff;
	--hospito-background-soft: #f5f8fb;
	--hospito-background-grey: #f4f7fa;
	--hospito-background-tint: #f4f8f6;
	--hospito-border: #e7ebf0;
	--hospito-border-soft: #e2ede7;

	/* ---------- Status ---------- */
	--hospito-star: #f5a623;
	--hospito-whatsapp: #25d366;
	--hospito-whatsapp-hover: #1faa52;
	--hospito-error: #c0392b;
	--hospito-success: #16a34a;
	--hospito-warning: #b45309;

	/* ------------------------------------------------------
	   TONE
	   A section sets --hos-on-surface (and friends) once; every
	   heading, paragraph and eyebrow inside reads from it. Dark
	   sections add .hos-tone--light, which flips the set.
	   ------------------------------------------------------ */
	--hos-on-surface: var(--hospito-heading);
	--hos-on-surface-body: var(--hospito-body);
	--hos-on-surface-muted: var(--hospito-muted);
	--hos-on-surface-eyebrow: var(--hospito-primary);
	--hos-on-surface-border: var(--hospito-border);

	/* ------------------------------------------------------
	   TYPOGRAPHY — the reference build's scale, value for value
	   ------------------------------------------------------
	   Manrope 800 for headings, Public Sans for body.

	   Three rules carried over from the reference:

	   1. A HEADING SIZE IS NEVER A FLAT PIXEL VALUE. Every size
	      is a clamp() whose upper bound is the number the site
	      owner sets in Hospito Settings. Printing a flat px
	      value from settings is what made a 42px H1 land on a
	      360px phone — the single loudest "title too big" bug.
	   2. The home HERO and an inner-page H1 are different
	      sizes: 53px against 34px. One token cannot serve both.
	   3. H3 is 16.8px at weight 700, not a scaled-down H2 at
	      800. Card and block titles sit at this size.
	   ------------------------------------------------------ */
	--hospito-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--hospito-font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--hospito-font-base: 1rem;                                             /* 16      */
	--hospito-font-sm: 0.875rem;                                           /* 14      */
	--hospito-font-xs: 0.78125rem;                                         /* 12.5    */
	--hospito-font-lead: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);      /* 15 → 17 */

	/* Upper bounds. Hospito Settings → Typography rewrites just these. */
	--hospito-size-hero: 3.3125rem;   /* 53 */
	--hospito-size-h1: 2.125rem;      /* 34 */
	--hospito-size-h2: 2.125rem;      /* 34 */
	--hospito-size-h3: 1.05rem;       /* 16.8 */

	--hospito-font-display: clamp(2rem, 4.4vw, var(--hospito-size-hero));  /* 32 → 53, home hero only */
	--hospito-font-h1: clamp(1.6rem, 3.4vw, var(--hospito-size-h1));       /* 25.6 → 34 */
	--hospito-font-h2: clamp(1.5rem, 2.7vw, var(--hospito-size-h2));       /* 24 → 34 */
	--hospito-font-h3: var(--hospito-size-h3);                             /* 16.8 */
	--hospito-font-h4: 1rem;                                               /* 16      */
	--hospito-font-card: 0.98rem;                                          /* 15.7 — card titles */

	/* H1/H2 carry 800; everything below them 700. An 800-weight H3 on a card
	   is what read as "too bold". */
	--hospito-weight-heading: 800;
	--hospito-weight-sub: 700;

	--hospito-line: 1.62;
	--hospito-line-tight: 1.15;
	--hospito-line-snug: 1.35;
	--hospito-tracking-heading: -0.022em;
	--hospito-tracking-eyebrow: 0.12em;

	/* ------------------------------------------------------
	   SPACING SCALE
	   The fix for "no gap between sections". Everything steps
	   through this scale — no ad-hoc pixel margins anywhere.
	   ------------------------------------------------------ */
	--hos-space-1: 0.25rem;    /*  4 */
	--hos-space-2: 0.5rem;     /*  8 */
	--hos-space-3: 0.75rem;    /* 12 */
	--hos-space-4: 1rem;       /* 16 */
	--hos-space-5: 1.25rem;    /* 20 */
	--hos-space-6: 1.5rem;     /* 24 */
	--hos-space-8: 2rem;       /* 32 */
	--hos-space-10: 2.5rem;    /* 40 */
	--hos-space-12: 3rem;      /* 48 */
	--hos-space-16: 4rem;      /* 64 */
	--hos-space-20: 5rem;      /* 80 */
	--hos-space-24: 6rem;      /* 96 */

	/* Vertical rhythm of a page section — fluid, so mobile is not
	   over-padded and desktop is not cramped. */
	--hos-section-y: clamp(3rem, 1.9rem + 4.8vw, 6rem);       /* 48 → 96 */
	--hos-section-y-sm: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);  /* 32 → 56 */
	--hos-section-y-lg: clamp(4rem, 2.5rem + 6.5vw, 8rem);    /* 64 → 128 */

	/* Gap between the heading block and the content under it. */
	--hos-head-gap: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
	/* Gap between cards in a grid. */
	--hos-grid-gap: clamp(1rem, 0.7rem + 1.3vw, 1.75rem);

	/* ---------- Layout ---------- */
	--hospito-container: 1240px;
	--hospito-container-narrow: 860px;
	--hospito-container-wide: 1440px;
	--hospito-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
	--hospito-radius: 14px;
	--hospito-radius-sm: 8px;
	--hospito-radius-lg: 20px;
	--hospito-radius-xl: 28px;
	--hospito-radius-pill: 999px;

	/* Kept for backward compatibility with older rules. */
	--hospito-section-space: var(--hos-section-y);

	/* ---------- Elevation ---------- */
	--hospito-shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.06);
	--hospito-shadow-sm: 0 4px 14px rgba(10, 37, 64, 0.07);
	--hospito-shadow: 0 12px 32px rgba(10, 37, 64, 0.1);
	--hospito-shadow-lg: 0 24px 60px rgba(10, 37, 64, 0.16);
	--hospito-shadow-card: 0 16px 40px rgba(10, 37, 64, 0.1);
	--hospito-ring: 0 0 0 3px rgba(22, 163, 74, 0.35);

	/* ---------- Header ---------- */
	--hospito-header-h: 76px;
	--hospito-topbar-h: 38px;
	--hospito-header-bg: #ffffff;
	--hospito-header-link: #16243c;
	--hospito-header-hover: #16a34a;
	--hospito-logo-width: 196px;
	--hospito-header-z: 9000;

	/* ---------- Motion ---------- */
	--hospito-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--hospito-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Tone helpers
   Put .hos-tone--light on any dark surface. This is what stops
   a navy heading rendering on a navy background.
   ============================================================ */

.hos-tone--light {
	--hos-on-surface: #ffffff;
	--hos-on-surface-body: rgba(255, 255, 255, 0.82);
	--hos-on-surface-muted: rgba(255, 255, 255, 0.66);
	--hos-on-surface-eyebrow: var(--hospito-mint);
	--hos-on-surface-border: rgba(255, 255, 255, 0.18);

	color: var(--hos-on-surface-body);
}

.hos-tone--light h1,
.hos-tone--light h2,
.hos-tone--light h3,
.hos-tone--light h4,
.hos-tone--light h5,
.hos-tone--light h6 {
	color: var(--hos-on-surface);
}

.hos-tone--light p {
	color: var(--hos-on-surface-body);
}

/* Explicitly dark surface, e.g. a light card placed inside a dark band. */
.hos-tone--dark {
	--hos-on-surface: var(--hospito-heading);
	--hos-on-surface-body: var(--hospito-body);
	--hos-on-surface-muted: var(--hospito-muted);
	--hos-on-surface-eyebrow: var(--hospito-primary);
	--hos-on-surface-border: var(--hospito-border);

	color: var(--hos-on-surface-body);
}

/* ============================================================
   Motion preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	:root {
		--hospito-transition: 0.01ms;
		--hospito-transition-fast: 0.01ms;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}