/* Body Age tokens, tema v2 "laporan makmal premium". The ONLY place where colour values live. Light = warm paper + navy ink. Dark = calm night scene (#12161F / cards #1B2130). One data colour: --good (younger / better). --warn (amber) only for "older / needs work". Everything else ink greys. Dark mode follows the system, [data-theme="light|dark"] on forces it (toggle in kit.js). */ :root{ --bg:#F7F5F0; --bg-alt:#F0EEE8; --surface:#FFFEFB; --surface-2:#F2F0EA; --ink:#141A26; --ink-soft:#545B6B; --ink-faint:#9CA0A9; --line:#E4E1D8; --line-strong:#CDC9BE; --good:#1F9D5C; --good-text:#157A45; --good-tint:#E4F1E8; --warn:#D08A1E; --warn-text:#8F5B0A; --warn-tint:#F7ECDA; --cta:#141A26; --on-cta:#FFFEFB; --cta-hover:#2A3244; --bar-m:#141A26; --bar-f:#A9ADB6; /* camera screen, fixed dark in both modes */ --screen:#0E1219; --on-screen:#F2F4F8; --screen-soft:#9AA3B5; --pose:#E6EAF1; --pose-joint:#3FCB85; --phone-bezel:#1A1F2B; --phone-island:#05070B; /* shadows tinted with ink */ --sh-rgb:20,26,38; --sh-card:0 1px 2px rgba(var(--sh-rgb),.05),0 18px 40px -26px rgba(var(--sh-rgb),.32); --sh-float:0 2px 6px rgba(var(--sh-rgb),.06),0 28px 56px -30px rgba(var(--sh-rgb),.42); --sh-phone:0 50px 80px -46px rgba(var(--sh-rgb),.6),0 14px 28px -18px rgba(var(--sh-rgb),.3); --scrim:rgba(14,18,25,.5); /* share card PNG, fixed surface in both modes */ --card-bg:#F7F5F0; --card-surface:#FFFEFB; --card-ink:#141A26; --card-soft:#545B6B; --card-line:#DEDAD0; --card-track:#E6E3DA; --card-good:#1F9D5C; --card-warn:#D08A1E; color-scheme:light; } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#12161F; --bg-alt:#161B26; --surface:#1B2130; --surface-2:#222939; --ink:#E8EBF1; --ink-soft:#A7B0C0; --ink-faint:#6E7788; --line:#283042; --line-strong:#3A4357; --good:#46C987; --good-text:#5ED39A; --good-tint:#16291F; --warn:#E3A344; --warn-text:#EDB65E; --warn-tint:#2E2416; --cta:#E8EBF1; --on-cta:#12161F; --cta-hover:#FFFFFF; --bar-m:#E8EBF1; --bar-f:#6E7788; --phone-bezel:#2B3243; --sh-rgb:0,0,0; --sh-card:0 0 0 1px rgba(255,255,255,.02),0 18px 40px -26px rgba(0,0,0,.6); --sh-float:0 2px 6px rgba(0,0,0,.2),0 28px 56px -30px rgba(0,0,0,.7); --sh-phone:0 50px 80px -46px rgba(0,0,0,.8),0 14px 28px -18px rgba(0,0,0,.5); --scrim:rgba(6,8,12,.66); color-scheme:dark; }} :root[data-theme="dark"]{ --bg:#12161F; --bg-alt:#161B26; --surface:#1B2130; --surface-2:#222939; --ink:#E8EBF1; --ink-soft:#A7B0C0; --ink-faint:#6E7788; --line:#283042; --line-strong:#3A4357; --good:#46C987; --good-text:#5ED39A; --good-tint:#16291F; --warn:#E3A344; --warn-text:#EDB65E; --warn-tint:#2E2416; --cta:#E8EBF1; --on-cta:#12161F; --cta-hover:#FFFFFF; --bar-m:#E8EBF1; --bar-f:#6E7788; --phone-bezel:#2B3243; --sh-rgb:0,0,0; --sh-card:0 0 0 1px rgba(255,255,255,.02),0 18px 40px -26px rgba(0,0,0,.6); --sh-float:0 2px 6px rgba(0,0,0,.2),0 28px 56px -30px rgba(0,0,0,.7); --sh-phone:0 50px 80px -46px rgba(0,0,0,.8),0 14px 28px -18px rgba(0,0,0,.5); --scrim:rgba(6,8,12,.66); color-scheme:dark; }