/* Care Tag Lab tokens v1. Fonts: self-hosted WOFF2 in ./fonts (Google Fonts, SIL OFL). Contrast pairs verified in checks/results.md */
@font-face{font-family:'Bricolage Grotesque';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/BricolageGrotesque-600.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/BricolageGrotesque-700.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/BricolageGrotesque-800.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/Figtree-400.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:500;font-style:normal;font-display:swap;src:url('fonts/Figtree-500.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/Figtree-600.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/Figtree-700.woff2') format('woff2')}
:root{
  --ct-mulberry:#4B1F63; /* Mulberry */
  --ct-ink:#1F1226; /* Ink */
  --ct-label:#F6F4F8; /* Label White */
  --ct-highlighter:#C9E44B; /* Highlighter */
  --ct-seam:#675A72; /* Seam */
  --ct-thread:#E3DCEA; /* Thread */
  --ct-paper:#FFFFFF; /* Paper */
  --ct-protein:#B3304F; --ct-protein-tint:#F7E3E8; /* Rose */
  --ct-tannin:#7A4A1E; --ct-tannin-tint:#F1E6DA; /* Tea */
  --ct-oil:#E3A21A; --ct-oil-tint:#FBEFD2; /* Ochre */
  --ct-dye:#2B50B5; --ct-dye-tint:#E0E7F7; /* Cobalt */
  --ct-wax:#0F6F68; --ct-wax-tint:#DAEEEC; /* Teal */
  --ct-on-oil:#1F1226;
  --ct-font-display:'Bricolage Grotesque',system-ui,'Segoe UI',Arial,sans-serif;
  --ct-font-text:'Figtree',system-ui,'Segoe UI',Arial,sans-serif;
  /* semantic roles */
  --ct-bg:var(--ct-label); --ct-surface:var(--ct-paper); --ct-text:var(--ct-ink); --ct-muted:var(--ct-seam); --ct-brand:var(--ct-mulberry); --ct-accent:var(--ct-highlighter); --ct-border:var(--ct-thread); --ct-link:var(--ct-mulberry);
  --ct-r-chip:8px; --ct-r-card:14px; --ct-r-tag:12px; --ct-r-pill:999px;
  --ct-s1:4px; --ct-s2:8px; --ct-s3:12px; --ct-s4:16px; --ct-s5:24px; --ct-s6:32px; --ct-s7:48px; --ct-s8:64px; --ct-s9:96px;
  --ct-measure:62ch; --ct-max:1200px;
  --ct-display-size:clamp(40px,40px + (64 - 40) * (100vw - 390px) / 890,64px); --ct-display-lh:1.04;
  --ct-h1-size:clamp(32px,32px + (48 - 32) * (100vw - 390px) / 890,48px); --ct-h1-lh:1.08;
  --ct-h2-size:clamp(26px,26px + (34 - 26) * (100vw - 390px) / 890,34px); --ct-h2-lh:1.15;
  --ct-h3-size:clamp(20px,20px + (22 - 20) * (100vw - 390px) / 890,22px); --ct-h3-lh:1.25;
  --ct-body-size:clamp(17px,17px + (18 - 17) * (100vw - 390px) / 890,18px); --ct-body-lh:1.55;
  --ct-small-size:14px; --ct-small-lh:1.45;
  --ct-label-size:12px; --ct-label-lh:1.2;
}
:root[data-theme="dark"],.ct-dark{--ct-bg:#160D1C;--ct-surface:#241631;--ct-text:#F6F4F8;--ct-muted:#B9AEC6;--ct-brand:#C9E44B;--ct-accent:#C9E44B;--ct-border:#3A2A4A;--ct-link:#C9E44B}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ct-bg:#160D1C;--ct-surface:#241631;--ct-text:#F6F4F8;--ct-muted:#B9AEC6;--ct-brand:#C9E44B;--ct-accent:#C9E44B;--ct-border:#3A2A4A;--ct-link:#C9E44B}}

/* base */
body{background:var(--ct-bg);color:var(--ct-text);font:400 var(--ct-body-size)/var(--ct-body-lh) var(--ct-font-text)}
h1,h2,h3,.ct-display{font-family:var(--ct-font-display);color:var(--ct-text)}
.ct-display{font-size:var(--ct-display-size);line-height:var(--ct-display-lh);font-weight:800;letter-spacing:-.02em}
h1{font-size:var(--ct-h1-size);line-height:var(--ct-h1-lh);font-weight:800;letter-spacing:-.015em}
h2{font-size:var(--ct-h2-size);line-height:var(--ct-h2-lh);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--ct-h3-size);line-height:var(--ct-h3-lh);font-weight:700}
.ct-label{font:700 12px/1.2 var(--ct-font-text);letter-spacing:.09em;text-transform:uppercase}
a{color:var(--ct-link)}
:focus-visible{outline:3px solid var(--ct-brand);outline-offset:2px;box-shadow:0 0 0 5px var(--ct-accent)}
/* signature: the care tag. Stitched inner line + peeled bottom-right corner. Set --ct-peel-bg to the colour behind the tag if it is not the page background. */
.ct-tag{position:relative;background:var(--ct-surface);border-radius:var(--ct-r-tag);padding:var(--ct-s5);--peel:26px;overflow:hidden}
.ct-tag::before{content:"";position:absolute;inset:8px;border:2px dashed var(--ct-thread);border-radius:calc(var(--ct-r-tag) - 4px);pointer-events:none}
.ct-tag::after{content:"";position:absolute;right:0;bottom:0;width:var(--peel);height:var(--peel);background:linear-gradient(135deg,var(--ct-highlighter) 50%,var(--ct-peel-bg,var(--ct-bg)) 50%)}
.ct-tag--brand{background:var(--ct-mulberry);color:var(--ct-label)}.ct-tag--brand::before{border-color:var(--ct-highlighter)}
.ct-tag--brand h1,.ct-tag--brand h2,.ct-tag--brand h3{color:var(--ct-label)}
/* buttons: Highlighter primary carries a Mulberry 2px border on light surfaces */
.ct-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--ct-r-pill);font:700 16px/1 var(--ct-font-text);text-decoration:none;cursor:pointer;background:var(--ct-highlighter);color:var(--ct-ink);border:2px solid var(--ct-mulberry)}
.ct-btn:hover{background:var(--ct-mulberry);color:var(--ct-highlighter)}
.ct-btn--quiet{background:transparent;color:var(--ct-brand)}
.ct-dark .ct-btn,.ct-tag--brand .ct-btn{border-color:var(--ct-highlighter)}
/* stain family chip: colour + glyph + word, never colour alone */
.ct-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:var(--ct-r-chip);font:700 13px/1 var(--ct-font-text);background:var(--fam-tint);color:var(--ct-ink);border:1.5px solid var(--fam)}
.ct-chip::before{content:"";width:14px;height:14px;background:var(--fam);flex:none}
.ct-chip[data-family=protein]{--fam:var(--ct-protein);--fam-tint:var(--ct-protein-tint)}.ct-chip[data-family=protein]::before{border-radius:50%}
.ct-chip[data-family=tannin]{--fam:var(--ct-tannin);--fam-tint:var(--ct-tannin-tint)}.ct-chip[data-family=tannin]::before{border-radius:3px}
.ct-chip[data-family=oil]{--fam:var(--ct-oil);--fam-tint:var(--ct-oil-tint);border-color:var(--ct-ink)}.ct-chip[data-family=oil]::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ct-chip[data-family=dye]{--fam:var(--ct-dye);--fam-tint:var(--ct-dye-tint)}.ct-chip[data-family=dye]::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.ct-chip[data-family=wax]{--fam:var(--ct-wax);--fam-tint:var(--ct-wax-tint)}.ct-chip[data-family=wax]::before{clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}