/* mec-look.css - tokens and the three looks. No layout. One source (Shared-Svcs/Look-Kit), copied with a MANIFEST;
   never edit a copy. Design: docs/2026-10-24-mec-look-design.html section 3.
   No attribute on <html> means: SIMPLE, light, no motion, normal text. Keep this order.
   Fonts are found beside this file (fonts/), so the kit folder can sit anywhere in an app's web/. */

/* colours, light (the default) */
:root,[data-scheme="light"]{
  color-scheme:light;
  --bg:#FBFAF6; --surface:#FFFFFF; --surface-2:#F2F0EA;
  --text:#161614; --text-2:#3A3935; --muted:#696761;
  --line:#DAD6CC;                 /* hairlines that carry no meaning; not tested */
  --edge:#89867A;                 /* the edge of a control; 3.2:1 or more */
  --on-brand:#FFFFFF; --press:rgba(22,22,20,.14);
  --shade:rgba(22,22,20,.18); --shade-soft:rgba(22,22,20,.08);
  --ok:#1E6B52;     --ok-tint:#E8F0EE;
  --warn:#8A5A12;   --warn-tint:#F3EEE7;
  --danger:#A3352B; --danger-tint:#F6EBEA;
  --career:#1F5F8B;  --career-tint:#E9EFF3;
  --health:#9C4A1A;  --health-tint:#F5EDE8;
  --profile:#7E4790; --profile-tint:#F2EDF4;
  --mastery:#0F5C56; --mastery-tint:#E7EFEE;   /* later */
  --elevate:#4C53B2; --elevate-tint:#EDEEF7;   /* later */
}
/* colours, dark */
[data-scheme="dark"]{
  color-scheme:dark;
  --bg:#121311; --surface:#191A18; --surface-2:#20211E;
  --text:#ECE9E1; --text-2:#C4C0B6; --muted:#9A978D;
  --line:#34352F; --edge:#716F66;
  --on-brand:#121311; --press:rgba(255,255,255,.14);
  --shade:rgba(0,0,0,.55); --shade-soft:rgba(0,0,0,.35);
  --ok:#5DBB98;     --ok-tint:#202A25;
  --warn:#D9A44E;   --warn-tint:#2C281D;
  --danger:#E0736A; --danger-tint:#2D2320;
  --career:#7FB4DC;  --career-tint:#23292C;
  --health:#E08A55;  --health-tint:#2D251E;
  --profile:#CA98DB; --profile-tint:#2B272C;
  --mastery:#5FC4B8; --mastery-tint:#202B28;
  --elevate:#9FA4EE; --elevate-tint:#26282D;
}
/* the product picks its colour. "ink" = the colour itself: every value below passes as text */
:root,[data-scheme]{--brand:var(--text);--brand-ink:var(--text);--tint:var(--surface-2)}  /* MEC, no product */
[data-product="career"] {--brand:var(--career); --brand-ink:var(--career); --tint:var(--career-tint)}
[data-product="health"] {--brand:var(--health); --brand-ink:var(--health); --tint:var(--health-tint)}
[data-product="profile"]{--brand:var(--profile);--brand-ink:var(--profile);--tint:var(--profile-tint)}
[data-product="mastery"]{--brand:var(--mastery);--brand-ink:var(--mastery);--tint:var(--mastery-tint)}
[data-product="elevate"]{--brand:var(--elevate);--brand-ink:var(--elevate);--tint:var(--elevate-tint)}

/* shape, space, type: the same in every look */
:root,[data-scheme]{
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --tap:44px; --gutter:16px; --measure:36rem; --page:40rem;
  --fs-small:1rem; --fs-body:1rem;   /* UX-L1: nothing is under 16 px, so small = body. Smaller text is told by colour and place, not size. */ --fs-reading:1.125rem; --fs-heading:1.25rem;
  --fs-display:1.875rem; --fs-hero:2.5rem;
  --lh-body:1.55; --lh-reading:1.65; --lh-heading:1.25; --lh-display:1.15;
  --ease-enter:cubic-bezier(.16,1,.3,1); --ease-exit:cubic-bezier(.7,0,.84,0); --ease-move:cubic-bezier(.45,0,.55,1);
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (min-width:600px){:root,[data-scheme]{--gutter:24px}}
@media (min-width:720px){:root,[data-scheme]{--fs-display:2.25rem;--fs-hero:3.5rem}}
[data-text="large"]{font-size:112.5%}  [data-text="larger"]{font-size:125%}   /* on <html>; every size is rem */

/* the looks. SIMPLE is the default. Each look sets EVERY token, including the --k-* ones the basics read
   (what a look adds: brand line, title wash, grouped rows). A token inherits from the nearest look, so three
   looks can sit side by side in one page (the preview does); that is why none of mec-base.css names a look. */
:root,[data-look="simple"]{
  --font-ui:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Iowan Old Style",Charter,Georgia,"Noto Serif","Times New Roman",serif;   /* titles */
  --font-serif:var(--font-display);                                                          /* reading */
  --dur-quick:0ms; --dur-std:0ms; --dur-slow:0ms; --rise:0px; --elev-1:none; --elev-sheet:none;
  --k-brandline:none;--k-wash:transparent;--k-bleed:0px;--k-wash-pad:0px;--k-wash-top:0px;
  --k-grp-bw:0px;--k-grp-r:0px;--k-grp-bg:transparent;--k-last-bw:1px;--k-row-pad:var(--s-1);--k-row-anim:none;
  --k-in:mec-fade;--k-out:mec-fade-out;
  --k-cap-float:none;--k-cap-size:1em;--k-cap-ink:var(--text);   /* no drop cap in Simple (a reading ornament) */
}
[data-look="calm"]{
  --font-ui:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Fraunces","Iowan Old Style",Charter,Georgia,"Noto Serif","Times New Roman",serif;
  --font-serif:"Literata","Iowan Old Style",Charter,Georgia,"Noto Serif","Times New Roman",serif;
  --dur-quick:100ms; --dur-std:160ms; --dur-slow:160ms; --rise:0px; --elev-1:none; --elev-sheet:0 -6px 18px var(--shade);
  --k-brandline:block;--k-wash:transparent;--k-bleed:0px;--k-wash-pad:0px;--k-wash-top:0px;
  --k-grp-bw:0px;--k-grp-r:0px;--k-grp-bg:transparent;--k-last-bw:1px;--k-row-pad:var(--s-1);--k-row-anim:none;
  --k-in:mec-fade;--k-out:mec-fade-out;
  --k-cap-float:inline-start;--k-cap-size:3.4em;--k-cap-ink:var(--brand-ink);
}
[data-look="full"]{
  --font-ui:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-display:"Fraunces","Iowan Old Style",Charter,Georgia,"Noto Serif","Times New Roman",serif;
  --font-serif:"Literata","Iowan Old Style",Charter,Georgia,"Noto Serif","Times New Roman",serif;
  --dur-quick:120ms; --dur-std:240ms; --dur-slow:400ms; --rise:8px;
  --elev-1:0 1px 2px var(--shade-soft),0 4px 12px var(--shade-soft); --elev-sheet:0 -8px 24px var(--shade);
  --k-brandline:none;--k-wash:var(--tint);--k-bleed:calc(var(--gutter) * -1);--k-wash-pad:var(--s-3);--k-wash-top:calc(var(--s-4) * -1);
  --k-grp-bw:1px;--k-grp-r:var(--r-lg);--k-grp-bg:var(--surface);--k-last-bw:0px;--k-row-pad:var(--s-3);--k-row-anim:mec-fade;
  --k-in:mec-slide;--k-out:mec-slide-out;
  --k-cap-float:inline-start;--k-cap-size:3.4em;--k-cap-ink:var(--brand-ink);
}
[data-motion="off"]{--dur-quick:0ms;--dur-std:0ms;--dur-slow:0ms;--rise:0px}   /* look.js sets it from the device */
@media (prefers-reduced-motion:reduce){:root,[data-look]{--dur-quick:0ms;--dur-std:0ms;--dur-slow:0ms;--rise:0px}}  /* same, if the script fails */

@font-face{font-family:"Fraunces";font-weight:400 700;font-style:normal;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400 700;font-style:normal;font-display:swap;
  src:url(fonts/atkinson-next-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-weight:400 700;font-style:normal;font-display:swap;   /* LK-29: Y with diaeresis (French), Polish, Turkish, Czech...; fetched only when a page uses one */
  src:url(fonts/atkinson-next-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Literata";font-weight:400 700;font-style:normal;font-display:swap;
  src:url(fonts/literata-latin.woff2) format("woff2")}
@font-face{font-family:"Literata";font-weight:400 700;font-style:normal;font-display:swap;
  src:url(fonts/literata-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* U+202F (the French narrow no-break space, before ; : ! ? and inside guillemets) is in NO Google subset of these three fonts
   (checked 27 Oct 2026: the whole-font text= subset has U+0178 but not U+202F). The browser draws it from the next font in the
   stack (system-ui / Noto Sans / a serif): invisible, fully legible, and it still never breaks the line. */

/* legacy names the three apps use today. Delete a line when no app reads it. */
:root,[data-scheme]{--ground:var(--bg);--ink:var(--text);--ink-2:var(--text-2);--signal:var(--brand-ink);
  --rule:var(--text);--serif:var(--font-display);--sans:var(--font-ui)}
/* more contrast: no new values, only a different pick (design 3.3). After the scheme blocks, so it wins. */
@media (prefers-contrast:more){:root,[data-scheme]{--muted:var(--text-2);--line:var(--edge)}}
/* print: ink on paper whatever the screen scheme. Last in the file, so it wins over the scheme and product blocks. */
@media print{:root,[data-scheme]{color-scheme:light;--bg:#fff;--surface:#fff;--surface-2:#fff;--text:#000;--text-2:#222;--muted:#444;
  --line:#999;--edge:#444;--brand:#000;--brand-ink:#000;--tint:#fff;--on-brand:#fff;--shade:transparent;--shade-soft:transparent}}