/* Orthopaedics WA — design tokens
   Taken from the live site on 2026-10-06 (computed styles in the browser + legacy/site-files CSS).
   The Site Builder layout imports this file; change the look here, not in templates. */

:root {
	/* Colour — brand */
	--owa-navy:          #074080;  /* primary: buttons, chips, links, contact button, active nav */
	--owa-navy-dark:     #110f3a;  /* hover / pressed state for navy */
	--owa-navy-tint:     #ddf0f8;  /* pale blue panels */
	--owa-navy-tint-2:   #bfd2da;  /* pale blue borders / dividers on tinted panels */
	--owa-red:           #e80013;  /* phone number highlight in the pre-footer only */

	/* Colour — neutrals */
	--owa-ink:           #141414;  /* headings and body text */
	--owa-ink-soft:      #474747;  /* secondary text, form text */
	--owa-muted:         #b2b2b2;  /* placeholders, breadcrumbs */
	--owa-line:          #e6e6e6;  /* rules between sections */
	--owa-field:         #f5f5f5;  /* form field background */
	--owa-white:         #ffffff;
	--owa-overlay:       rgba(20, 20, 50, 0.40); /* over hero/banner photos so white text reads */

	/* Type */
	--owa-font:          "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--owa-weight-light:  300;   /* headings and body copy are Light on the live site */
	--owa-weight-regular: 400;  /* nav, footer links, buttons */
	--owa-weight-medium: 500;   /* chips, "Learn more", labels */
	--owa-weight-bold:   700;   /* qualifications line, phone numbers */

	--owa-text:          1.125rem;  /* 18px body (live is 20px light; 18px reads better on small screens) */
	--owa-text-sm:       1rem;      /* card summaries */
	--owa-text-xs:       0.875rem;  /* footer small print, breadcrumbs */
	--owa-chip:          0.75rem;   /* 12px chip labels, uppercase (10px on the old site was too small on phones) */
	--owa-leading:       1.6;

	--owa-h-display:     clamp(2.75rem, 7vw, 5.625rem);  /* 90px hero "Orthopaedics WA" */
	--owa-h1:            clamp(2.25rem, 5vw, 4.125rem);  /* 66px section titles ("Contact Us") */
	--owa-h2:            clamp(1.75rem, 3.5vw, 2.5rem);
	--owa-h3:            clamp(1.5rem, 2.6vw, 2.125rem); /* 34px card titles (specialist names) */
	--owa-h4:            1.25rem;
	--owa-tracking-tight: -0.05em;  /* big Light headings are tightly spaced on the live site */
	--owa-kicker:        1.125rem;  /* "■ QUESTIONS?" label above section titles, uppercase */

	/* Layout */
	--owa-max:           1180px;  /* content width (live grid sits around 1180px inside a 1680px frame) */
	--owa-gutter:        clamp(1rem, 4vw, 2.5rem);
	--owa-gap:           2rem;
	--owa-section:       clamp(3.5rem, 8vw, 7rem);  /* vertical space between sections */
	--owa-header-h:      72px;

	/* Shape */
	--owa-radius:        0;       /* buttons, fields and photos are square on the live site */
	--owa-radius-pill:   999px;   /* chips */
	--owa-radius-round:  50%;     /* floating contact button, logo */
	--owa-shadow:        0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 20px rgba(39, 44, 49, 0.07);

	/* Breakpoints (for reference in media queries) */
	/* small < 640px, medium 640–1023px, large >= 1024px */
}