/* ATAD Apps design system — colour tokens (light + dark), fonts, and picker colours. Shared by the phone app and the office app. Light/dark follows the device unless is set (saved in localStorage "atad_theme"). */ :root{ --bg:#F5F4EF; --panel:#FFFFFF; --panel2:#F9F8F4; --line:#E2DFD6; --text:#171A21; --muted:#565E6D; --faint:#666D7C; --accent:#0F7469; --accent-ink:#FFFFFF; --accent-soft:#DDF1EE; --red:#A8322A; --red-soft:#FBE6E3; --amber:#8A5800; --amber-soft:#FBEFD8; --green:#1D6F43; --green-soft:#E0F2E7; --scrim:rgba(23,26,33,.45); --shadow:0 12px 32px rgba(23,26,33,.14); --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --navy:var(--accent); --teal:var(--accent); /* used by the date/time pickers */ color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0E131D; --panel:#151C29; --panel2:#1B2433; --line:#263045; --text:#E9ECF2; --muted:#9AA4B7; --faint:#838DA1; --accent:#35B9A9; --accent-ink:#062320; --accent-soft:#12302E; --red:#F2877A; --red-soft:#3A1D1C; --amber:#EBB55A; --amber-soft:#382A12; --green:#6CCB94; --green-soft:#15301F; --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.45); color-scheme:dark; } } :root[data-theme="dark"]{ --bg:#0E131D; --panel:#151C29; --panel2:#1B2433; --line:#263045; --text:#E9ECF2; --muted:#9AA4B7; --faint:#838DA1; --accent:#35B9A9; --accent-ink:#062320; --accent-soft:#12302E; --red:#F2877A; --red-soft:#3A1D1C; --amber:#EBB55A; --amber-soft:#382A12; --green:#6CCB94; --green-soft:#15301F; --scrim:rgba(0,0,0,.6); --shadow:0 12px 32px rgba(0,0,0,.45); color-scheme:dark; } /* ---- date / time pickers, re-coloured to the tokens ---- */ .ap-field .ap-ico{color:var(--accent)} .ap-field .ap-txt.ap-empty,.ap-field .ap-rel{color:var(--faint)} .ap-back.ap-sheet{background:var(--scrim)} .ap-pop{background:var(--panel)!important;border-color:var(--line)!important;color:var(--text)!important;box-shadow:var(--shadow)!important} .ap-read small{color:var(--muted)} .ap-wheels::before{background:var(--accent-soft)!important} .ap-wheels::after{background:linear-gradient(var(--panel),transparent 34%,transparent 66%,var(--panel))!important} .ap-it{color:var(--muted)!important} .ap-it.ap-on{color:var(--accent)!important} .ap-btn{background:var(--panel2)!important;border-color:var(--line)!important;color:var(--text)!important;font-family:var(--sans)!important} .ap-btn.ap-link{background:transparent!important;border-color:transparent!important;color:var(--accent)!important} .ap-btn.ap-primary{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}