/*
 * tokens.css — design tokens for drpatil site (GeneratePress child theme "ap-child")
 * Source: Claude Design "Homepage v3" / Treatment Design System v2. Values copied, not invented.
 * Full reference: design-tokens.md (project root)
 *
 * RULES
 * 1. Palette hex values do NOT live here. They live only in
 *    GeneratePress > Customizer > Colors > Global Colors, which outputs each one
 *    as var(--<slug>) (e.g. var(--blue-600)). This file only points at them.
 * 2. The only raw colour values allowed in this file are the rgba() overlays below.
 * 3. Blocks and global styles use these variables. Never a raw value.
 * 4. Media queries cannot read CSS variables. Breakpoints are listed in design-tokens.md.
 */

/* ---------- Font: Manrope variable (wght 200–800), self-hosted, latin + latin-ext ---------- */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-ext-wght.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ---------- Colour: semantic roles (point at GP Global Colors) ---------- */
	--surface-page: var(--stone-0);
	--surface-raised: var(--stone-0);
	--surface-sunken: var(--stone-50);
	--surface-tint: var(--blue-50);
	--surface-tint-faint: var(--blue-25);
	--surface-warm: var(--sand-100);
	--surface-cta: var(--navy-cta);
	--surface-footer: var(--navy-footer);

	--text-strong: var(--ink-900);
	--text-body: var(--ink-700);
	--text-muted: var(--ink-500);
	--text-link: var(--blue-600);
	--text-link-hover: var(--blue-800);
	--text-accent: var(--blue-600);
	--text-inverse: var(--stone-0);
	--text-inverse-muted: var(--inverse-muted);

	--border-subtle: var(--stone-100);
	--border-default: var(--stone-200);
	--border-strong: var(--stone-300);
	--border-focus: var(--blue-500);
	--border-tint: var(--blue-200);
	--border-warm: var(--sand-300);
	--border-warm-strong: var(--sand-600);
	--underline-soft: var(--blue-300);
	--underline-muted: var(--stone-400);

	--accent: var(--blue-600);
	--accent-hover: var(--blue-700);
	--on-accent: var(--stone-0);

	--danger: var(--red-600);                    /* form errors */
	--success: var(--green-600);                 /* form sent */

	/* ---------- Colour: overlays (the only raw colour values allowed) ---------- */
	--surface-header: rgba(255, 255, 255, 0.86);      /* sticky header behind blur */
	--on-dark-hover: rgba(255, 255, 255, 0.08);        /* outline button hover on navy */
	--on-dark-rule: rgba(255, 255, 255, 0.1);          /* footer bottom rule */
	--on-dark-line-soft: rgba(255, 255, 255, 0.18);    /* dividers between figures on navy (About experience) */
	--on-dark-line: rgba(255, 255, 255, 0.32);         /* rule above figures on navy (About experience) */
	--on-dark-underline: rgba(255, 255, 255, 0.4);     /* CTA band link underline */
	--on-dark-border: rgba(255, 255, 255, 0.5);        /* outline button on navy */
	--on-dark-faint: rgba(255, 255, 255, 0.75);        /* footer legal links */
	--text-inverse-faint: rgba(185, 200, 230, 0.75);   /* footer bottom line text */
	/* White at other strengths on navy (final handoff, 2026-10-30: authority bands, travel bands) */
	--on-dark-14: rgba(255, 255, 255, 0.14);
	--on-dark-16: rgba(255, 255, 255, 0.16);
	--on-dark-22: rgba(255, 255, 255, 0.22);
	--on-dark-28: rgba(255, 255, 255, 0.28);
	--on-dark-45: rgba(255, 255, 255, 0.45);
	--on-dark-60: rgba(255, 255, 255, 0.6);
	--on-dark-90: rgba(255, 255, 255, 0.9);
	--on-dark-94: rgba(255, 255, 255, 0.94);
	--ink-a04: rgba(15, 26, 46, 0.04);                 /* hairline shadow under cost sheets */
	--ink-a14: rgba(15, 26, 46, 0.14);                 /* shadow above the phone action bar */
	--danger-bg: var(--red-50);
	--success-bg: var(--green-50);
	--focus-ring: 0 0 0 3px rgba(59, 114, 209, 0.28);
	--shadow-float: 0 1px 2px rgba(15, 26, 46, 0.05), 0 6px 16px -8px rgba(15, 26, 46, 0.12); /* menus, popovers only */
	--blur-nav: saturate(1.2) blur(14px);

	/* ---------- Typography: family, weights, tracking ---------- */
	--font-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--fw-regular: 400;
	--fw-medium: 500;                           /* nav items and mobile sub-menu links (measured) */
	--fw-semibold: 600;
	--fw-bold: 700;
	--track-display: -0.025em;
	--track-tight: -0.015em;
	--track-title: -0.005em;
	--track-eyebrow: 0.08em;

	/* ---------- Typography: tiers (size / line-height). Weight noted per tier. ---------- */
	/* H1 · page title · 600 · track-display */
	--fs-h1: clamp(38px, 4.5vw, 56px);
	--lh-h1: 1.06;
	/* H2 · every major section heading · 600 · track-display */
	--fs-h2: clamp(30px, 3.2vw, 38px);
	--lh-h2: 1.12;
	/* H2 close · final CTA heading only · 600 · track-display */
	--fs-h2-close: clamp(32px, 3.6vw, 42px);
	--lh-h2-close: 1.08;
	/* H3 · 600 · track-tight */
	--fs-h3: 22px;
	--lh-h3: 1.3;
	/* H3 small · 600 · track-tight */
	--fs-h3-s: 20px;
	--lh-h3-s: 1.35;
	/* Title L · component title (design .t-3) · 600 · track-tight */
	--fs-title-l: 24px;
	--lh-title-l: 1.3;
	/* Title M · component title (design .t-4) · 600 · track-title */
	--fs-title-m: 20px;
	--lh-title-m: 1.4;
	/* Lead · intro paragraphs · 400 */
	--fs-lead: clamp(19px, 1.5vw, 20px);
	--lh-lead: 1.55;
	/* Body · 400 · 18px desktop, 17px small screens */
	--fs-body: max(17px, min(1.125rem, 4.4vw));
	--lh-body: 1.65;
	/* Small · 400 */
	--fs-small: 16px;
	--lh-small: 1.6;
	/* Small, kept at 16px on phones: the designs that don't shrink small text (knee arthritis family; owner 2026-10-30: follow the designs) */
	--fs-small-keep: 16px;
	--lh-small-keep: 1.6;
	/* Caption · 400 */
	--fs-caption: 14px;
	--lh-caption: 1.5;
	/* Eyebrow / label · 700 · uppercase · track-eyebrow */
	--fs-eyebrow: 13px;
	--lh-eyebrow: 1.3;
	/* UI · buttons and arrow links · 600 */
	--fs-ui: 16px;
	--fs-ui-lg: 17px;
	--fs-ui-sm: 15px;
	--fs-link: 17px;

	/* Editorial exceptions (named in the design; use only where listed) */
	--fs-chapter: clamp(36px, 4vw, 48px);     /* Knee / Hip chapter titles · lh 1.05 */
	--fs-proof: clamp(24px, 2.2vw, 30px);     /* hero proof figures · lh 1.12 */
	--fs-feature: clamp(24px, 2.4vw, 30px);   /* featured guide title · lh 1.2 */
	--fs-statement: clamp(22px, 2.2vw, 28px); /* robotic section statement · lh 1.25 */

	--measure: 62ch;
	--measure-narrow: 46ch;

	/* ---------- Spacing scale ---------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;
	--space-11: 160px;

	--section-y: var(--space-10); /* 128px; 64px at <=900px */
	--section-y-credit: clamp(104px, 11vw, 168px); /* site credit page bands; 88px at <=760px */
	--fs-credit-display: clamp(52px, 8.6vw, 126px); /* site credit page title; smaller at <=760px */

	/* ---------- Layout ---------- */
	--content: 1240px;                          /* foreground width. Permanent rule. */
	--page-margin: clamp(20px, 5vw, 72px);
	--wrap-max: calc(var(--content) + 2 * var(--page-margin));
	--gutter: 24px;
	--hdr-h: 80px;                              /* 64px at <=1239px (final handoff shell) */
	--anchor-offset: 96px;                      /* in-page links stop 16px below the sticky header (design: hdr-h + 16px); 80px at <=1239px */
	--mbar-h: 68px;                             /* mobile action bar */

	/* ---------- Radius ---------- */
	--radius-xs: 4px;                           /* checkbox */
	--radius-sm: 8px;
	--radius-button: 10px;
	--radius-card: 12px;
	--radius-photo: 12px;
	--radius-pill: 999px;                       /* true tags only */
	--radius-input: 8px;                        /* form fields */

	/* ---------- Control sizes (older patients: 44px minimum tap target) ---------- */
	--touch-min: 44px;
	--control-h-sm: 44px;
	--control-h-md: 52px;
	--control-h-lg: 60px;
	--input-h: 56px;                            /* form text fields */
}

@media (max-width: 1239.98px) {
	:root {
		--hdr-h: 64px;
		--anchor-offset: 80px;
	}
}

@media (max-width: 900px) {
	:root {
		--section-y: var(--space-8);
	}
}

@media (max-width: 760px) {
	:root {
		--section-y-credit: 88px;
		--fs-credit-display: clamp(40px, 11.4vw, 64px);
		--fs-h3: 20px;
		--fs-h3-s: 19px;
		--fs-small: 15px;
		--lh-small: 1.55;
	}
}