/* Generated by scripts/sync-look.mjs from the Next.js app. Do not edit. */ /* Today's fonts, as next/font serves them on redianhealth.vercel.app (latin and the other subsets). */ @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(/fonts/7b19b489dc6743ba-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(/fonts/28793f5c5e3d822d-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(/fonts/c9c3823090ec8b55-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(/fonts/b3bf17a9041d9433-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(/fonts/2801417b65625cf5-s.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:IBM Plex Sans;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/7b19b489dc6743ba-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/28793f5c5e3d822d-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/c9c3823090ec8b55-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/b3bf17a9041d9433-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/2801417b65625cf5-s.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:IBM Plex Sans;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/7b19b489dc6743ba-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/28793f5c5e3d822d-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/c9c3823090ec8b55-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/b3bf17a9041d9433-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/2801417b65625cf5-s.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:IBM Plex Sans;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/7b19b489dc6743ba-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/28793f5c5e3d822d-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/c9c3823090ec8b55-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/b3bf17a9041d9433-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/2801417b65625cf5-s.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:IBM Plex Sans;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/7b19b489dc6743ba-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/28793f5c5e3d822d-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/c9c3823090ec8b55-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/b3bf17a9041d9433-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/2801417b65625cf5-s.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:IBM Plex Sans;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(/fonts/26d4368bf94c0ec4-s.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Sans Fallback;src:local("Arial");ascent-override:101.32%;descent-override:27.18%;line-gap-override:0.00%;size-adjust:101.17%} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/58f386aa6b1a2a92-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/011e180705008d6f-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/7ba5fb2a8c88521c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/92eeb95d069020cc-s.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:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/d3ebbfd689654d3a-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ef4d5661765d0e49-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/d29838c109ef09b4-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/e40af3453d7c920a-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/99dcf268bda04fe5-s.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:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/98e207f02528a563-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/73cb51aac9c97f90-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/d26bbd13d6b70f89-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/20535187d867b7b9-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/5356a6a4f2c8c8d8-s.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:IBM Plex Mono;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/db96af6b531dc71f-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:IBM Plex Mono Fallback;src:local("Arial");ascent-override:76.16%;descent-override:20.43%;line-gap-override:0.00%;size-adjust:134.59%} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/f11ffaf03a80bc19-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/b818b0ea116ed117-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ed89fb4fc238c6bf-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/e115bc1b6e48400d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fc9d3723ce3bfccb-s.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:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/597b6a5d799c44de-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/f11ffaf03a80bc19-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/b818b0ea116ed117-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ed89fb4fc238c6bf-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/e115bc1b6e48400d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fc9d3723ce3bfccb-s.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:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/597b6a5d799c44de-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/f11ffaf03a80bc19-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/b818b0ea116ed117-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ed89fb4fc238c6bf-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/e115bc1b6e48400d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/fc9d3723ce3bfccb-s.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:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/597b6a5d799c44de-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:"Source Serif 4 Fallback";src:local("Times New Roman");ascent-override:87.87%;descent-override:28.41%;line-gap-override:0.00%;size-adjust:117.91%} @font-face{font-family:Josefin Slab;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/009e13548ddd5596-s.p.woff2) format("woff2");unicode-range:u+00??,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} @font-face{font-family:Josefin Slab Fallback;src:local("Times New Roman");ascent-override:71.69%;descent-override:23.90%;line-gap-override:0.00%;size-adjust:104.62%} :root{--font-face-sans:"IBM Plex Sans","IBM Plex Sans Fallback"} :root{--font-face-sans-full:"IBM Plex Sans","IBM Plex Sans Fallback"} :root{--font-face-mono:"IBM Plex Mono","IBM Plex Mono Fallback"} :root{--font-face-serif:"Source Serif 4","Source Serif 4 Fallback"} :root{--font-face-wordmark:"Josefin Slab","Josefin Slab Fallback"} /* ============================================================================= * Redian design tokens * ----------------------------------------------------------------------------- * The single source of truth for every colour, size, space and duration in the * product. Before this file the app carried 192 hand-typed hex values, 183 * rgba() literals, 80 font sizes and 199 padding values across 2,100 inline * style objects, so no two screens agreed and nothing could be themed. * * Three layers, and the direction only ever goes downward: * * 1. PRIMITIVES raw ramps. Never referenced by a component. * 2. SEMANTIC what a thing is FOR - surface, border, text, critical. * This is the only layer components are allowed to use. * 3. COMPONENT sizes shared by controls: heights, control padding. * * A component that reaches past the semantic layer to a primitive is a bug: * it will be correct in one theme and wrong in the other three, because only * the semantic layer is redefined per theme. * * THEMES. Four, in two pairs, plus "match my device". * * Sage light the brand ground: warm cream, sage, deep teal-green * Evergreen dark the same brand after hours * Clinical light the original cool blue-on-grey * Midnight dark the original dark blue-grey * * Sage and Evergreen are public/redian-design-system/tokens.json rendered into * the product's semantic vocabulary. They are what "match my device" resolves * to and what a new install gets. Clinical and Midnight are the palette this * file shipped with, kept whole and still selectable: a bench that has spent a * year reading results off the blue theme should not have it taken away by a * brand refresh. * * An explicit choice stamps data-theme on . "Match my device" stamps * nothing, so only the media query separates Sage from Evergreen. Every token * is declared in the bare :root first; the theme blocks redefine, never * introduce. * * CONTRAST. Every foreground/background pair below is verified against WCAG * 2.1 AA (4.5:1 for body text, 3:1 for large text and UI boundaries) in all * four themes. Do not edit a colour here without re-checking its pair - * scripts/check-contrast.mjs does it for you and runs in CI. * ========================================================================== */ :root { /* ========================================================================== * 1. PRIMITIVES * ====================================================================== */ /* --- Brand: sage ------------------------------------------------------- * The ribbon-R's own colour, extended into a full ramp. Light steps are * backgrounds and tags; 400/500 are the mark itself; 600 and up are text on * sage surfaces. Sage is light-to-mid strength - anything set directly on * sage-400/500 is dark ink, never white. */ --sg-50: #f5f7f3; --sg-100: #e9eee4; --sg-200: #d3dcc8; --sg-300: #bccbac; --sg-400: #a7b89f; /* the identity colour, exactly as the mark uses it */ --sg-500: #8ca184; --sg-600: #708766; --sg-700: #586b4f; --sg-800: #43523d; --sg-900: #2e3a2a; /* Sage after dark. The ramp inverts: 50 is the darkest tint and 900 the * lightest ink, so a component asking for "the quiet sage fill" gets a quiet * fill in both themes without knowing which one it is in. */ --sgd-50: #20241e; --sgd-100: #293024; --sgd-200: #333b2c; --sgd-300: #414b36; --sgd-400: #54614a; --sgd-500: #7c9070; --sgd-600: #93a688; --sgd-700: #aebfa5; --sgd-800: #c8d4c1; --sgd-900: #e1e8dc; /* --- Brand: deep green ------------------------------------------------- * The secondary brand colour - a teal-green, deliberately far enough from * sage on the wheel that the two never read as the same colour at a glance. * 600 and 700 come from the brand sheet; 500 and 800 are the steps a product * UI needs either side of them for hover, press and quiet text. */ --gn-500: #2c7a62; --gn-600: #1f5c4a; /* white on this = 8.4:1 */ --gn-700: #163f32; --gn-800: #0e2a21; /* The same green lifted for dark surfaces. Mid-light, so anything filled * with it carries dark ink. */ --gnd-400: #6fc9a6; --gnd-500: #4fa98a; --gnd-600: #419278; --gnd-700: #2e6b56; /* --- Warm neutral ------------------------------------------------------ * The page is warm cream rather than stark white, and the ink a warm * charcoal rather than black. The brand sheet names four steps; an interface * needs twelve, so the rest are interpolated into its ramp rather than * invented beside it. */ --w-0: #fdfcf9; --w-25: #fbf9f5; /* the brand cream */ --w-50: #f7f5ef; --w-100: #f2efe8; --w-200: #e7e3d9; --w-300: #d9d4c6; --w-400: #bdb7a8; --w-500: #9c978a; --w-600: #7c7668; --w-700: #635f55; /* 5.6:1 on the page - lightest warm neutral legal as body text */ --w-800: #423f38; --w-900: #2f2f2f; /* the wordmark ink */ /* Warm neutral after dark. Near-black with a trace of warmth left in it, so * the dark theme reads as the same brand rather than a generic slate. */ --wd-0: #131416; --wd-25: #17181a; --wd-50: #1e2022; --wd-100: #26282b; --wd-200: #33363a; --wd-300: #4a4d52; --wd-400: #6b6e73; --wd-500: #82858b; --wd-600: #9a9da2; --wd-700: #b8babe; --wd-800: #d6d8db; --wd-900: #f3f3f1; /* --- Brand state colours ---------------------------------------------- * The only colours allowed to carry meaning. Each sits at its own hue angle, * because with three greens in the system - sage, deep green, success - a * result badge must never read as brand chrome. The solid steps sit a notch * darker than the brand sheet's display values wherever white has to reach * 4.5:1 on them; the sheet's own values are kept as the -text steps. * * Warning goes the other way. The sheet fills it with #b8863b and sets dark * ink on top, which is 4.15:1 - so the fill is lifted one step instead, and * the ink the sheet specifies is the ink that ships. */ --st-success: #4a7226; --st-success-text: #3e6320; --st-success-wash: #edf3e4; --st-success-edge: #cbddb4; --st-warning: #c29246; --st-warning-text: #755116; --st-warning-wash: #f8efe0; --st-warning-edge: #e6d3ae; --st-error: #9c3b33; --st-error-text: #8a332c; --st-error-wash: #f7ebe9; --st-error-edge: #e6c9c5; --st-info: #35617e; --st-info-text: #2e5670; --st-info-wash: #e6eef4; --st-info-edge: #bbd0df; /* The same four after dark: mid-light fills that carry dark ink, each with a * deep wash and a legible text step. */ --std-success: #8fc15c; --std-success-text: #a5ce7b; --std-success-wash: #1e2617; --std-success-edge: #36462a; --std-warning: #e0ae63; --std-warning-text: #e5bc7e; --std-warning-wash: #2a2317; --std-warning-edge: #4a3c24; --std-error: #e37a6e; --std-error-text: #e9938a; --std-error-wash: #2a1c1a; --std-error-edge: #4a2e2a; --std-info: #7fb0de; --std-info-text: #9cc4e8; --std-info-wash: #1a222b; --std-info-edge: #2d3f4f; /* --- Clinical / Midnight primitives ------------------------------------ * The palette this file shipped with, kept whole. Nothing in the Sage or * Evergreen blocks touches these, and nothing in these touches those. */ /* Neutral. Slight blue bias, so it sits with the accent rather than looking * like an unconsidered mid-grey. */ --n-0: #ffffff; --n-25: #fbfcfd; --n-50: #f7f8fa; --n-100: #eff0f5; --n-200: #dfe2ea; --n-300: #c5c8d1; --n-400: #878da0; --n-500: #5f6779; /* 5.67:1 on white - lightest neutral legal as body text */ --n-600: #4c5266; --n-700: #3b4152; --n-800: #2f3441; --n-900: #20232b; --n-950: #12151b; /* Accent. The product's original blue, extended into a full ramp. */ --a-50: #edf1fd; --a-100: #dce5fa; --a-200: #bed1f6; --a-300: #a4c0f0; --a-400: #85a9eb; --a-500: #618dde; --a-600: #4472c4; /* white on this = 4.72:1 */ --a-700: #28448a; /* white on this = 9.19:1 */ --a-800: #1c3062; --a-850: #16264d; --a-900: #111d3b; /* Status. Deliberately not blue: a blue "success" and a blue "primary * action" are indistinguishable at a glance. */ --rd-50: #fcf0ef; --rd-100: #fadbd8; --rd-200: #f3c9c5; --rd-500: #b4231a; --rd-700: #8f1c14; --am-50: #fdf6e7; --am-100: #fef3cd; --am-200: #ecd9a4; --am-500: #8a5a00; --am-700: #6d4700; --gr-50: #eaf5f0; --gr-100: #d5f0e8; --gr-200: #bcdcd0; --gr-500: #0f6b4f; --gr-700: #0b5540; /* Midnight's raw values, declared here so its theme block only re-points * semantic tokens and never invents a colour. */ --d-page: #0d1017; --d-raised: #151a23; --d-sunken: #1b212c; --d-line: #29303c; --d-line-2: #666f82; --d-text: #e6e9f0; --d-text-2: #a3abbd; --d-text-3: #8b94a6; /* 6.24:1 on page, 5.29:1 on sunken - the tightest pair */ /* ========================================================================== * 2. SEMANTIC - the only layer components may use * * The bare :root carries SAGE, which is both the default theme and what * "match my device" shows in daylight. * ====================================================================== */ /* Surfaces. The brand's cream is the card, not the page: an interface needs * its raised surfaces to sit above the ground, so the page drops one step to * w-100 and cards come up to the cream itself. */ --surface-page: var(--w-100); --surface-raised: var(--w-25); --surface-sunken: var(--w-200); --surface-inset: var(--w-50); --surface-overlay: var(--w-0); --surface-scrim: rgba(47, 47, 47, 0.45); --surface-hover: var(--w-50); --surface-selected: var(--sg-100); /* Borders. --border-default is a boundary, not text. A boundary that carries * meaning uses --border-strong. */ --border-subtle: var(--w-200); --border-default: var(--w-300); --border-strong: var(--w-600); --border-heavy: var(--w-800); /* Text */ --text-primary: var(--w-900); --text-secondary: var(--w-800); --text-muted: var(--w-700); --text-disabled: var(--w-500); --text-inverse: var(--w-25); --text-link: var(--gn-700); /* Accent. Sage is the identity colour but far too light to fill a button * carrying white text, so the deep green does that work and sage owns * selection, chips and quiet fills. */ --accent-solid: var(--gn-600); --accent-solid-hover: var(--gn-700); --accent-solid-text: #ffffff; --accent-muted: var(--gn-500); --accent-subtle: var(--sg-100); --accent-subtle-text: var(--gn-700); --accent-border: var(--sg-300); --accent-text: var(--gn-600); /* Status. Each is a set: solid fill, subtle tint, text, border. */ --critical-solid: var(--st-error); --critical-solid-text: #ffffff; --critical-subtle: var(--st-error-wash); --critical-text: var(--st-error-text); --critical-border: var(--st-error-edge); --warning-solid: var(--st-warning); --warning-solid-text: var(--w-900); --warning-subtle: var(--st-warning-wash); --warning-text: var(--st-warning-text); --warning-border: var(--st-warning-edge); --success-solid: var(--st-success); --success-solid-text: #ffffff; --success-subtle: var(--st-success-wash); --success-text: var(--st-success-text); --success-border: var(--st-success-edge); --info-solid: var(--st-info); --info-solid-text: #ffffff; --info-subtle: var(--st-info-wash); --info-text: var(--st-info-text); --info-border: var(--st-info-edge); /* Focus. One ring, everywhere, in every theme. */ --focus-color: var(--gn-600); --focus-width: 2px; --focus-offset: 2px; /* Brand. The two identity colours, reachable by name from a component that * genuinely means "the Redian sage" rather than "the accent". */ --brand-sage: var(--sg-400); --brand-green: var(--gn-600); --on-sage: var(--w-900); --on-brand: #ffffff; /* Elevation. Warm-tinted rather than pure black, so a shadow cast on cream * does not turn the surface under it grey. */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(47, 47, 47, 0.06), 0 1px 3px rgba(47, 47, 47, 0.08); --shadow-md: 0 2px 4px rgba(47, 47, 47, 0.06), 0 4px 12px rgba(47, 47, 47, 0.1); --shadow-lg: 0 4px 8px rgba(47, 47, 47, 0.06), 0 12px 32px rgba(47, 47, 47, 0.13); --shadow-xl: 0 8px 16px rgba(47, 47, 47, 0.08), 0 24px 48px rgba(47, 47, 47, 0.16); /* ========================================================================== * 3. SCALES - theme-independent * ====================================================================== */ /* Space. 4px base, 8-point rooted. Replaces 199 ad-hoc padding values. */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Type. Nine steps replacing 80. The dense clinical tables sit at * --text-sm; --text-2xs is for uppercase labels only, never prose. */ --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-md: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.65; --weight-normal: 400; --weight-medium: 500; /* On IBM Plex Sans both of these render as medium: the sans is loaded up * to 500 only (app/layout.tsx). They still apply to the serif and mono. */ --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-caps: 0.08em; /* Radius. The product's look is square, and the square is the brand sheet's * own --radius-none: "the deliberate square-corner option, not a fallback * for 'forgot to set a radius'". Every container step resolves to it, so a * card, a panel, an input and a modal all agree without any of them saying * so, and the whole product changes from these four lines. * * --radius-full is the one exception, and the sheet names it: pills, * avatars and status dots. A round status dot beside a square card is not * an inconsistency - it is the dot being a dot. */ --radius-none: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-full: 9999px; /* Layers. The app had 14 unmanaged z-index values from 0 to 10001. * Anything that stacks picks one of these seven. */ --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* Communications workspace: intrinsic columns also stack on narrow screens. */ --communications-compose-basis: 30rem; --communications-preview-basis: 22rem; --communications-summary-min: 12rem; --communications-preview-max: 23rem; --communications-message-height: 14rem; --communications-avatar-size: 2.75rem; --communications-icon-size: 1.125rem; /* Motion */ --duration-instant: 80ms; --duration-fast: 140ms; --duration-normal: 220ms; --duration-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ========================================================================== * 4. COMPONENT SIZING - overridden by density below * ====================================================================== */ --control-height-sm: 28px; --control-height-md: 34px; --control-height-lg: 40px; --control-padding-x: var(--space-3); --control-font: var(--text-md); --row-padding-y: var(--space-3); --row-padding-x: var(--space-4); --section-gap: var(--space-6); /* Type families, one job each. next/font fills the --font-face-* variables. * * --font-wordmark Josefin Slab. The REDIAN logotype and marketing * headlines, nothing else. Never UI text - not page * titles, not empty states, not modals. * --font-display Source Serif 4. The one or two moments per screen that * earn warmth: page titles, panel headers, patient names, * and the report a patient carries out of the building. * A serif drawn and hinted for screen UI, so it stays * sharp at 16px instead of going soft. * --font-body IBM Plex Sans. Everything dense - labels, buttons, * table headers, body copy. * --font-mono IBM Plex Mono. Lab values, reference ranges, sample IDs * and timestamps. Anywhere digits have to line up. */ --font-wordmark: var(--font-face-wordmark), 'Zilla Slab', Georgia, serif; --font-display: var(--font-face-serif), Georgia, 'Times New Roman', serif; --font-body: var(--font-face-sans), -apple-system, 'Segoe UI', system-ui, sans-serif; /* The same sans with its semibold and bold, for navigation only: the side * rail, tabs and the test picker. See app/layout.tsx. */ --font-body-full: var(--font-face-sans-full), -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: var(--font-face-mono), ui-monospace, Consolas, monospace; } /* ============================================================================= * EVERGREEN - the brand after hours, and what "match my device" resolves to on * a machine set to dark. * * Note what changes beyond the colours: --accent-solid-text and all four * state -solid-text tokens flip to dark ink, because every fill in this theme * is mid-light. A white label on Evergreen's green is 2.4:1; dark ink on it is * 8:1, and dark ink is what the brand sheet specifies for exactly this case. * ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --surface-page: var(--wd-25); --surface-raised: var(--wd-50); --surface-sunken: var(--wd-100); --surface-inset: var(--wd-0); --surface-overlay: var(--wd-100); --surface-scrim: rgba(0, 0, 0, 0.7); --surface-hover: #2a2d30; --surface-selected: var(--sgd-100); --border-subtle: var(--wd-100); --border-default: var(--wd-200); --border-strong: var(--wd-400); --border-heavy: var(--wd-500); --text-primary: var(--wd-900); --text-secondary: var(--wd-800); --text-muted: var(--wd-600); --text-disabled: var(--wd-400); --text-inverse: var(--wd-25); --text-link: var(--gnd-400); --accent-solid: var(--gnd-500); --accent-solid-hover: var(--gnd-600); --accent-solid-text: var(--wd-25); --accent-muted: var(--gnd-600); --accent-subtle: #1c2d27; --accent-subtle-text: #8fd9bc; --accent-border: #2e4a40; --accent-text: var(--gnd-400); --critical-solid: var(--std-error); --critical-solid-text: var(--wd-25); --critical-subtle: var(--std-error-wash); --critical-text: var(--std-error-text); --critical-border: var(--std-error-edge); --warning-solid: var(--std-warning); --warning-solid-text: var(--wd-25); --warning-subtle: var(--std-warning-wash); --warning-text: var(--std-warning-text); --warning-border: var(--std-warning-edge); --success-solid: var(--std-success); --success-solid-text: var(--wd-25); --success-subtle: var(--std-success-wash); --success-text: var(--std-success-text); --success-border: var(--std-success-edge); --info-solid: var(--std-info); --info-solid-text: var(--wd-25); --info-subtle: var(--std-info-wash); --info-text: var(--std-info-text); --info-border: var(--std-info-edge); --focus-color: var(--gnd-400); --brand-sage: var(--sgd-500); --brand-green: var(--gnd-500); --on-sage: var(--wd-25); --on-brand: var(--wd-25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.36); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.6); } } :root[data-theme='evergreen'] { --surface-page: var(--wd-25); --surface-raised: var(--wd-50); --surface-sunken: var(--wd-100); --surface-inset: var(--wd-0); --surface-overlay: var(--wd-100); --surface-scrim: rgba(0, 0, 0, 0.7); --surface-hover: #2a2d30; --surface-selected: var(--sgd-100); --border-subtle: var(--wd-100); --border-default: var(--wd-200); --border-strong: var(--wd-400); --border-heavy: var(--wd-500); --text-primary: var(--wd-900); --text-secondary: var(--wd-800); --text-muted: var(--wd-600); --text-disabled: var(--wd-400); --text-inverse: var(--wd-25); --text-link: var(--gnd-400); --accent-solid: var(--gnd-500); --accent-solid-hover: var(--gnd-600); --accent-solid-text: var(--wd-25); --accent-muted: var(--gnd-600); --accent-subtle: #1c2d27; --accent-subtle-text: #8fd9bc; --accent-border: #2e4a40; --accent-text: var(--gnd-400); --critical-solid: var(--std-error); --critical-solid-text: var(--wd-25); --critical-subtle: var(--std-error-wash); --critical-text: var(--std-error-text); --critical-border: var(--std-error-edge); --warning-solid: var(--std-warning); --warning-solid-text: var(--wd-25); --warning-subtle: var(--std-warning-wash); --warning-text: var(--std-warning-text); --warning-border: var(--std-warning-edge); --success-solid: var(--std-success); --success-solid-text: var(--wd-25); --success-subtle: var(--std-success-wash); --success-text: var(--std-success-text); --success-border: var(--std-success-edge); --info-solid: var(--std-info); --info-solid-text: var(--wd-25); --info-subtle: var(--std-info-wash); --info-text: var(--std-info-text); --info-border: var(--std-info-edge); --focus-color: var(--gnd-400); --brand-sage: var(--sgd-500); --brand-green: var(--gnd-500); --on-sage: var(--wd-25); --on-brand: var(--wd-25); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.36); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.6); } /* ============================================================================= * SAGE - named explicitly, for someone on a dark machine who wants the light * brand anyway. Identical to the bare :root; declared rather than inherited so * that it beats the media query above. * ========================================================================== */ :root[data-theme='sage'] { --surface-page: var(--w-100); --surface-raised: var(--w-25); --surface-sunken: var(--w-200); --surface-inset: var(--w-50); --surface-overlay: var(--w-0); --surface-scrim: rgba(47, 47, 47, 0.45); --surface-hover: var(--w-50); --surface-selected: var(--sg-100); --border-subtle: var(--w-200); --border-default: var(--w-300); --border-strong: var(--w-600); --border-heavy: var(--w-800); --text-primary: var(--w-900); --text-secondary: var(--w-800); --text-muted: var(--w-700); --text-disabled: var(--w-500); --text-inverse: var(--w-25); --text-link: var(--gn-700); --accent-solid: var(--gn-600); --accent-solid-hover: var(--gn-700); --accent-solid-text: #ffffff; --accent-muted: var(--gn-500); --accent-subtle: var(--sg-100); --accent-subtle-text: var(--gn-700); --accent-border: var(--sg-300); --accent-text: var(--gn-600); --critical-solid: var(--st-error); --critical-solid-text: #ffffff; --critical-subtle: var(--st-error-wash); --critical-text: var(--st-error-text); --critical-border: var(--st-error-edge); --warning-solid: var(--st-warning); --warning-solid-text: var(--w-900); --warning-subtle: var(--st-warning-wash); --warning-text: var(--st-warning-text); --warning-border: var(--st-warning-edge); --success-solid: var(--st-success); --success-solid-text: #ffffff; --success-subtle: var(--st-success-wash); --success-text: var(--st-success-text); --success-border: var(--st-success-edge); --info-solid: var(--st-info); --info-solid-text: #ffffff; --info-subtle: var(--st-info-wash); --info-text: var(--st-info-text); --info-border: var(--st-info-edge); --focus-color: var(--gn-600); --brand-sage: var(--sg-400); --brand-green: var(--gn-600); --on-sage: var(--w-900); --on-brand: #ffffff; --shadow-sm: 0 1px 2px rgba(47, 47, 47, 0.06), 0 1px 3px rgba(47, 47, 47, 0.08); --shadow-md: 0 2px 4px rgba(47, 47, 47, 0.06), 0 4px 12px rgba(47, 47, 47, 0.1); --shadow-lg: 0 4px 8px rgba(47, 47, 47, 0.06), 0 12px 32px rgba(47, 47, 47, 0.13); --shadow-xl: 0 8px 16px rgba(47, 47, 47, 0.08), 0 24px 48px rgba(47, 47, 47, 0.16); } /* ============================================================================= * CLINICAL - the original light palette, unchanged. * ========================================================================== */ :root[data-theme='clinical'] { --surface-page: var(--n-50); --surface-raised: var(--n-0); --surface-sunken: var(--n-100); --surface-inset: var(--n-25); --surface-overlay: var(--n-0); --surface-scrim: rgba(18, 21, 27, 0.55); --surface-hover: var(--n-50); --surface-selected: var(--a-50); --border-subtle: var(--n-100); --border-default: var(--n-300); --border-strong: var(--n-400); --border-heavy: var(--n-600); --text-primary: var(--n-900); --text-secondary: var(--n-600); --text-muted: var(--n-500); --text-disabled: var(--n-400); --text-inverse: var(--n-0); --text-link: var(--a-700); --accent-solid: var(--a-700); --accent-solid-hover: var(--a-800); --accent-solid-text: var(--n-0); --accent-muted: var(--a-600); --accent-subtle: var(--a-50); --accent-subtle-text: var(--a-800); --accent-border: var(--a-200); --accent-text: var(--a-700); --critical-solid: var(--rd-500); --critical-solid-text: var(--n-0); --critical-subtle: var(--rd-50); --critical-text: var(--rd-700); --critical-border: var(--rd-200); --warning-solid: var(--am-500); --warning-solid-text: var(--n-0); --warning-subtle: var(--am-50); --warning-text: var(--am-700); --warning-border: var(--am-200); --success-solid: var(--gr-500); --success-solid-text: var(--n-0); --success-subtle: var(--gr-50); --success-text: var(--gr-700); --success-border: var(--gr-200); --info-solid: var(--a-700); --info-solid-text: var(--n-0); --info-subtle: var(--a-50); --info-text: var(--a-800); --info-border: var(--a-200); --focus-color: var(--a-600); --brand-sage: var(--sg-400); --brand-green: var(--gn-600); --on-sage: var(--w-900); --on-brand: var(--n-0); --shadow-sm: 0 1px 2px rgba(18, 21, 27, 0.06), 0 1px 3px rgba(18, 21, 27, 0.08); --shadow-md: 0 2px 4px rgba(18, 21, 27, 0.06), 0 4px 12px rgba(18, 21, 27, 0.09); --shadow-lg: 0 4px 8px rgba(18, 21, 27, 0.06), 0 12px 28px rgba(18, 21, 27, 0.12); --shadow-xl: 0 8px 16px rgba(18, 21, 27, 0.08), 0 24px 48px rgba(18, 21, 27, 0.16); } /* ============================================================================= * MIDNIGHT - the original dark palette, unchanged. * ========================================================================== */ :root[data-theme='midnight'] { --surface-page: var(--d-page); --surface-raised: var(--d-raised); --surface-sunken: var(--d-sunken); --surface-inset: #10141c; --surface-overlay: var(--d-raised); --surface-scrim: rgba(0, 0, 0, 0.7); --surface-hover: #1e2531; --surface-selected: #16203a; --border-subtle: #20262f; --border-default: var(--d-line); --border-strong: var(--d-line-2); --border-heavy: #4a5568; --text-primary: var(--d-text); --text-secondary: var(--d-text-2); --text-muted: var(--d-text-3); --text-disabled: #6f7788; --text-inverse: var(--d-page); --text-link: #86aae6; --accent-solid: #3f6cc4; --accent-solid-hover: #35609f; --accent-solid-text: #ffffff; --accent-muted: #5a83d0; --accent-subtle: #16203a; --accent-subtle-text: #b8cdf5; --accent-border: #2c4372; --accent-text: #8fb3f5; --critical-solid: #c22f24; --critical-solid-text: #ffffff; --critical-subtle: #2a1614; --critical-text: #ffb4a8; --critical-border: #4d2822; --warning-solid: #9a6600; --warning-solid-text: #ffffff; --warning-subtle: #251d0e; --warning-text: #f0cd8b; --warning-border: #453518; --success-solid: #12795a; --success-solid-text: #ffffff; --success-subtle: #10241d; --success-text: #8fdcbd; --success-border: #1e4335; --info-solid: #3f6cc4; --info-solid-text: #ffffff; --info-subtle: #141d2e; --info-text: #a9c8f5; --info-border: #2c4372; --focus-color: #7fa3e0; --brand-sage: var(--sgd-500); --brand-green: var(--gnd-500); --on-sage: var(--wd-25); --on-brand: #ffffff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.36); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.55); } /* ============================================================================= * DENSITY * A lab bench scanning 40 results and a front desk registering one patient * want different row heights. Set data-density on or any container. * ========================================================================== */ [data-density='compact'] { --control-height-sm: 24px; --control-height-md: 28px; --control-height-lg: 34px; --control-padding-x: var(--space-2); --control-font: var(--text-sm); --row-padding-y: var(--space-1); --row-padding-x: var(--space-3); --section-gap: var(--space-4); } [data-density='comfortable'] { --control-height-sm: 32px; --control-height-md: 40px; --control-height-lg: 48px; --control-padding-x: var(--space-4); --control-font: var(--text-base); --row-padding-y: var(--space-4); --row-padding-x: var(--space-5); --section-gap: var(--space-8); } /* ============================================================================= * LEGACY BRIDGE * ----------------------------------------------------------------------------- * 2,100 inline style objects reference the old --gray-* / --teal-* names. * Rather than a 2,100-site find-and-replace in one commit, the old names now * point at semantic tokens. Two things follow from that: * * - those call sites become theme-aware for free, and * - each can be migrated to the semantic name it already resolves to, screen * by screen, with no visual change at the moment of the edit. * * These names are frozen. Nothing new may use them; scripts/check-tokens.mjs * fails the build if the count goes up. Delete this block when it reaches zero. * * --teal-* is a fossil twice over: it named a colour the product stopped using * when the palette went blue, and the brand's own green is not that teal * either. It points at the accent set, whatever the accent currently is. * ========================================================================== */ :root { --gray-950: var(--text-primary); --gray-900: var(--text-primary); --gray-800: var(--text-secondary); --gray-700: var(--text-secondary); --gray-600: var(--text-secondary); --gray-500: var(--text-muted); --gray-400: var(--text-disabled); --gray-300: var(--border-default); --gray-200: var(--border-subtle); --gray-100: var(--surface-sunken); --gray-50: var(--surface-page); --white: var(--surface-raised); --teal-900: var(--accent-subtle-text); --teal-850: var(--accent-subtle-text); --teal-800: var(--accent-subtle-text); --teal-700: var(--accent-solid); --teal-600: var(--accent-muted); --teal-500: var(--accent-muted); --teal-400: var(--accent-border); --teal-300: var(--accent-border); --teal-200: var(--accent-border); --teal-100: var(--accent-subtle); --teal-50: var(--accent-subtle); --red: var(--critical-solid); --red-50: var(--critical-subtle); --red-200: var(--critical-border); --red-light: var(--critical-subtle); --green: var(--success-solid); --green-light: var(--success-subtle); --amber: var(--warning-solid); --amber-700: var(--warning-text); --amber-light: var(--warning-subtle); --blue-600: var(--info-solid); --gold: var(--warning-solid); --gold-light: var(--warning-border); --font-sans: var(--font-body); --radius: var(--radius-md); --focus-ring: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--focus-color); } /* * Redian global stylesheet. * * Phase 0 of the interface overhaul. Two rules used to live here that were * quietly fighting the rest of the app: * * 1. `border-radius: 0 !important` on every element. It beat inline styles, * so 363 borderRadius declarations written across the app did nothing. * Radius is now a token; set --radius to 0 to get the old square look * back in one edit instead of an !important sledgehammer. * * 2. Eleven gray, teal and red variables were referenced by name in * components but never defined here. --gray-200 alone appeared 141 times, * so those borders resolved to nothing and simply did not render. * * Fonts load through next/font in app/layout.tsx, not an @import here, an * @import blocks the first paint. --font-display used to read 'Times New * Roman' with two spaces, which matched no installed face. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; /* Tells the browser which theme its own widgets should match: scrollbars, * the date picker, select menus, form autofill. Without it a dark theme * keeps a white scrollbar and a white calendar popover. * * ThemeProvider's boot script sets this inline before the first paint, for * whichever of the four themes is active. The rules here are the fallback * for the frames before that script runs, and for a page that never gets * it: the print preview, a scraper, site data blocked. */ color-scheme: light; } @media (prefers-color-scheme: dark) { html:not([data-polarity='light']) { color-scheme: dark; } } html[data-polarity='dark'] { color-scheme: dark; } html, body { height: 100%; /* * The page does not float. * * Without this the document rubber-bands: drag up at the top or down at the * bottom and the whole interface slides away from its edge and springs back, * and on a touchscreen a downward drag at the top arms pull-to-refresh. Both * are wrong here. The rail and the header are sticky, so a bounce peels them * off the edge they are pinned to and the whole shell looks loose; and a * stray refresh on a clinic tablet throws away a half-typed registration. * * `none` rather than `contain`: `contain` only stops the scroll chaining to * a parent, and the document has no parent to chain to. It is the bounce * itself that has to go. */ overscroll-behavior: none; } html { /* * Reserve the scrollbar's width whether or not there is one, so a short * screen and a long screen line up. Otherwise every navigation between a * page that scrolls and a page that does not shifts the entire layout * sideways by the width of the scrollbar, which reads as the interface * twitching each time you move. */ scrollbar-gutter: stable; } body { font-family: var(--font-body); /* No faux bold. The sans ships without 600 and 700 (see app/layout.tsx), * so a heavier request settles on medium instead of being smeared. */ font-synthesis-weight: none; background: var(--surface-page); color: var(--text-primary); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Keyboard focus is visible everywhere, including on elements whose inline * styles set `outline: none`, because a box-shadow ring cannot be cleared by * an outline declaration. Pointer clicks do not trigger :focus-visible, so * this costs the mouse user nothing. */ :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } button:focus-visible, a:focus-visible, [role='button']:focus-visible, [role='tab']:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -1px; border-color: var(--focus-color) !important; } /* Reach for this on a wrapper when the focused control sits flush against an * edge and an outline would be clipped. */ .focus-ring:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Skip link: first thing in the tab order, invisible until focused. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: calc(var(--z-tooltip) + 1); background: var(--accent-solid); color: var(--accent-solid-text); padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* Screen-reader-only text that stays in the accessibility tree. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* Print styles */ @media print { * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .no-print { display: none !important; } .print-only { display: block !important; } body { background: white; } } .print-only { display: none; } /* Animations. `spin` lives here rather than being re-declared in six * component files through inline