@layer reset, tokens, base, layout, components, templates, utilities;

@layer tokens {
:root{
  color-scheme: light;

  /* ---------- Neutrals (green-grey, from the Kontact Medical logo grey #58645F) ---------- */
  --paper:#F6F8F7;            /* page background */
  --surface:#FFFFFF;          /* cards, header, buy box, drawers, inputs, plate */
  --ink:#10201A;              /* primary text, prices (16.89 on surface) */
  --muted:#4A5852;            /* secondary text, placeholders (7.48 on surface) */
  --ink-disabled:#8A9690;     /* disabled text only (exempt) */
  --line:#D3DED8;             /* DECORATIVE hairlines only */
  --line-strong:#6B7B74;      /* EVERY interactive boundary (4.46 on surface, 4.18 on paper) */
  --btn-disabled-bg:#E4EBE7;  /* aria-disabled secondary controls only */

  /* ---------- Product stage ---------- */
  --stage-top:#F0F4F2;
  --stage-bottom:#E4EBE7;
  --stage-deep:#DCE6E0;       /* spec plate, numeral tiles (flat) */
  --stage-bg:linear-gradient(180deg,var(--stage-top) 0%,var(--stage-bottom) 100%);
  --lightbox-top:#F7FBF9;     /* baked into hero composite (inc/hero.php); reference only */
  --lightbox-bottom:#DDE9E2;
  --shadow-contact:radial-gradient(closest-side,rgb(16 32 26 / .20),rgb(16 32 26 / 0));

  /* ---------- Brand (sampled from the Kontact Medical logo, 2026-10-27).
     Token names --tobe/--navy are kept from v1 so no selector changes: --tobe = logo green, --navy = deep green. ---------- */
  --tobe:#1B7F5B;             /* logo green: mark, rules, dimension lines, focus (4.96 on surface) */
  --accent:#17734F;           /* links on white/paper; primary fill (white on it 5.83) */
  --navy:#0F4D38;             /* deep green: hover/pressed, selected, links inside ANY tinted panel, USP bar, hero, footer */
  --navy-glow:#14603F;        /* hero glow; hover fill of buttons on deep green */
  --signal:#F1B33C;           /* logo orange, the accent: CTAs on deep green, rules, badges, active marks, icons on deep green.
                                 Text on it is --ink (9.4); as text it sits only on deep green (5.26), never on light. */
  --signal-deep:#E39E1E;      /* hover/pressed fill of orange buttons (ink on it 7.9) */
  --signal-tint:#FDF3E0;      /* warm highlight panels */
  --accent-tint:#E8F3EE;      /* selected chips/rows, info panels (logo mint) */
  --on-navy:#F2F6F4;          /* text on deep green (9.01) */
  --on-navy-muted:#B9D6C8;    /* secondary text on deep green (6.32) */
  --on-navy-line:#8FD0B2;     /* links/icons/blueprint lines on deep green (5.53) */
  --blueprint-grid:rgb(143 208 178 / .10);

  /* ---------- Status (links inside tints use --navy) ---------- */
  --success:#17704A;  --success-tint:#E6F2EC;
  --warn:#8A5300;     --warn-tint:#FBF1E1;
  --error:#B42318;    --error-tint:#FBEAE8;

  /* ---------- Family bands (PLP header bands only; never behind products) ---------- */
  --band-mist:#EAF2EE;   /* beds & stretchers, couches & tables, procedure chairs */
  --band-frost:#E6F1F1;  /* fridges, freezers & warmers */
  --band-linen:#F5F0E4;  /* lights, stools (warm, after the logo yellow) */
  --band-sage:#E7F0E8;   /* mobility */
  --band-fog:#EEF1EF;    /* trolleys & linen skips, accessories */

  --scrim:rgb(16 32 26 / .45);

  /* ---------- Typography ---------- */
  --font-text:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:Outfit,"Outfit Fallback",Arial,sans-serif;   /* the logo's face: headings, hero, numerals */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --fs-badge:.875rem;                                           /* 14: header count numerals only */
  --fs-sm:.9375rem;                                             /* 15: floor */
  --fs-body:clamp(1rem, .9792rem + .0926vw, 1.0625rem);         /* 16 -> 17 (360 -> 1440) */
  --fs-body-lg:1.125rem;                                        /* 18: is-large templates */
  --fs-lead:clamp(1.125rem, 1.0833rem + .1852vw, 1.25rem);      /* 18 -> 20 */
  --fs-h4:clamp(1.0625rem, 1.0208rem + .1852vw, 1.1875rem);     /* 17 -> 19 */
  --fs-h3:clamp(1.25rem, 1.1667rem + .3704vw, 1.5rem);          /* 20 -> 24 */
  --fs-h2:clamp(1.5rem, 1.3333rem + .7407vw, 2rem);             /* 24 -> 32 */
  --fs-h1:clamp(1.75rem, 1.5rem + 1.1111vw, 2.5rem);            /* 28 -> 40, Outfit 600 */
  --fs-price:clamp(1.75rem, 1.5833rem + .7407vw, 2.25rem);      /* 28 -> 36 */
  --fs-price-card:1.25rem;                                      /* 20 */
  --fs-numeral:clamp(2rem, 1.6667rem + 1.4815vw, 3rem);         /* 32 -> 48, Outfit 600 */
  --fs-sheet:clamp(2rem, 1.5rem + 2.2222vw, 3.5rem);            /* 32 -> 56, Outfit 600, deep-green sheets */
  --fs-display:clamp(2.5rem, 1.9444rem + 2.4691vw, 4.25rem);   /* 40 -> 68, Outfit 600, Home hero */

  --lh-display:1.04; --lh-sheet:1.05; --lh-h1:1.15; --lh-heading:1.2; --lh-ui:1.35; --lh-sm:1.45; --lh-body:1.55; --lh-lg:1.6;
  --tracking-display:-.02em; --tracking-heading:-.01em; --tracking-kicker:.06em; --tracking-lockup:.08em;
  --numeric:tabular-nums lining-nums;
  --measure:68ch;

  /* ---------- Spacing (4px base; px on purpose, type and text boxes are rem) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section:clamp(3rem, 1.6667rem + 5.9259vw, 7rem);            /* 48 -> 112 */
  --gutter:16px;   /* 20 @600, 24 @1024, 32 @1280 (layout.css) */
  --margin:16px;   /* 24 @600, 32 @1024, 40 @1280 (layout.css) */
  --card-pad:16px; /* 20 @1600 */

  /* ---------- Radii ---------- */
  --r-0:0; --r-1:6px; --r-2:10px; --r-3:16px; --r-pill:999px;

  /* ---------- Elevation ---------- */
  --e-0:none;
  --e-1:0 1px 0 rgb(16 32 26 / .08);
  --e-2:0 12px 32px -16px rgb(16 32 26 / .22);
  --e-2-up:0 -12px 32px -16px rgb(16 32 26 / .22);
  --e-3:0 24px 64px -24px rgb(16 32 26 / .32);
  --e-lightbox:0 0 0 1px rgb(255 255 255 / .08), 0 32px 96px -24px rgb(27 127 91 / .55);

  /* ---------- Borders ---------- */
  --border-hair:1px solid var(--line);              /* decorative */
  --border-ui:1px solid var(--line-strong);         /* inputs, chips, radio cards, switches */
  --border-error:2px solid var(--error);
  --border-active:2px solid var(--accent);
  --border-selected:2px solid var(--navy);
  --border-secondary:1.5px solid var(--navy);
  --rule-signal:3px solid var(--signal);   /* echoes the yellow rule under the wordmark */
  --rule-signal-w:48px;
  --focus-ring:3px solid var(--tobe);
  --focus-ring-on-navy:3px solid var(--surface);
  --focus-offset:2px;

  /* ---------- Motion ---------- */
  --d-1:120ms; --d-2:200ms; --d-3:320ms; --d-4:600ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  /* ---------- Layout ---------- */
  --w-max:1320px; --w-wide:1440px; --w-narrow:760px; --w-text:68ch;
  --sidebar-w:256px;               /* 280 @1600 */
  --h-usp:2.25rem;                 /* desktop only, min-height */
  --h-main:3.5rem;                 /* min-height; 4rem @1024 */
  --h-nav:3rem;                    /* desktop only, min-height */
  --h-search:3.25rem;              /* mobile Home/PLP/Search only */
  --h-buybar:64px;                 /* mobile, + env(safe-area-inset-bottom) */
  --h-tray:72px;                   /* compare tray, desktop P1 */
  --sticky-top:3.5rem;             /* core.js writes the measured sticky header height */
  --sticky-bottom:0px;             /* core.js sums visible bottom bars */

  /* ---------- Targets & controls (rem so they scale with Larger text) ---------- */
  --tap:2.75rem; --btn-s:2.5rem; --btn-m:3rem; --btn-l:3.5rem; --field-h:3rem; --check:1.5rem;

  /* ---------- Stage geometry defaults (PHP overrides per context) ---------- */
  --stage-ar:4/3; --floor:12%; --obj-w:84%; --ar:1.333;

  /* ---------- Z-index ---------- */
  --z-overlay:2; --z-header:100; --z-filterbtn:110; --z-buybar:200; --z-tray:210; --z-toast:400;
}
html.text-lg{font-size:112.5%}
body.is-large{--fs-body:var(--fs-body-lg);--fs-sm:1rem;--btn-s:3rem;--btn-m:3rem;--btn-l:3.5rem}

@media (min-width:600px){:root{--gutter:20px;--margin:24px}}
@media (min-width:1024px){:root{--h-main:4rem;--gutter:24px;--margin:32px;--sidebar-w:256px;--sticky-top:4rem}}
@media (min-width:1280px){:root{--gutter:32px;--margin:40px}}
@media (min-width:1600px){:root{--sidebar-w:280px;--card-pad:20px}}
@media (prefers-reduced-motion:reduce){:root{--d-1:1ms;--d-2:1ms;--d-3:1ms;--d-4:1ms}}
}

/* Fonts are self-hosted (OFL). Fallback metrics computed in Phase 0 from the shipped files
   (letter-frequency-weighted advance vs Arial; ~/kontact-build/font-fallback.py). */
@font-face{font-family:Inter;src:url(../fonts/inter-var-wght.latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url(../fonts/outfit-var-500-700.latin.woff2) format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Roboto");size-adjust:107.49%;ascent-override:90.13%;descent-override:22.44%;line-gap-override:0%}
@font-face{font-family:"Outfit Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial"),local("Roboto");font-weight:500 700;size-adjust:94.29%;ascent-override:106.06%;descent-override:27.58%;line-gap-override:0%}