/* Daily Life Doc, round 11 (zone T2a), round 12 (zone X): the colour sets of the patient's Look (Paper, Sage, Sun,
   Ink, Sky, Berry). Everything here is scoped to [data-look="<colours>"] (never `data-theme`, which is light and
   dark). DD.homeLook (js/home/home-ctx.js) sets data-look on the new Today's page and on `.phone`, on a document the
   patient reads (js/docs/doc-look.js) and on the care team's panel "The patient's Today" (js/convo/chat-cols.js).
   Why the colours glide: the tokens below are registered (@property) as colours, so a change of data-look (a Look
   approved while the patient is on Today) moves every colour of the screen together in one transition on the
   element that carries the attribute; nothing moves and nothing is drawn again. Reduce motion: the end colours at
   once. Why `--top-a`/`--top-b`: the sets name a gradient `--top`, but `--top` is the app's top offset
   (css/shell.css: the status bar plus the call bar); the generated blocks write the gradient's two colours as
   --top-a and --top-b instead. The colour blocks are generated from js/home/library.json (`sets`) by
   scripts/theme_css.py; a change of a set is made in the JSON and the blocks written again (checked by
   js/today/char-kinds.check.js). Round 12 (zone X): the theme's Top, its preview and its fonts went with the old
   Today. */

@property --bg { syntax: '<color>'; inherits: true; initial-value: #F5F2EC; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #1A2130; }
@property --ink2 { syntax: '<color>'; inherits: true; initial-value: #4D5364; }
@property --ink3 { syntax: '<color>'; inherits: true; initial-value: #666B7B; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #E5DFD3; }
@property --soft { syntax: '<color>'; inherits: true; initial-value: #ECE7DD; }
@property --today { syntax: '<color>'; inherits: true; initial-value: #EE9A4D; }
@property --today-bg { syntax: '<color>'; inherits: true; initial-value: #FCE4CC; }
@property --today-d { syntax: '<color>'; inherits: true; initial-value: #7A3F0C; }
@property --nav { syntax: '<color>'; inherits: true; initial-value: #7A3F0C; }
@property --on-nav { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --on-today { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --done { syntax: '<color>'; inherits: true; initial-value: #9DB65C; }
@property --on-done { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --top-a { syntax: '<color>'; inherits: true; initial-value: #FCE4CC; }
@property --top-b { syntax: '<color>'; inherits: true; initial-value: #F6C79B; }
@property --on-top { syntax: '<color>'; inherits: true; initial-value: #3B2A1A; }

/* The glide: one duration for every colour, on each element that carries the attribute (the phone and Today's own
   root both declare the set, so both glide alike). */
[data-look] {
  --look-m: 640ms;
  transition: --bg var(--look-m) ease, --surface var(--look-m) ease, --ink var(--look-m) ease, --ink2 var(--look-m) ease,
    --ink3 var(--look-m) ease, --line var(--look-m) ease, --soft var(--look-m) ease, --today var(--look-m) ease,
    --today-bg var(--look-m) ease, --today-d var(--look-m) ease, --nav var(--look-m) ease, --on-nav var(--look-m) ease,
    --on-today var(--look-m) ease, --done var(--look-m) ease, --on-done var(--look-m) ease, --top-a var(--look-m) ease,
    --top-b var(--look-m) ease, --on-top var(--look-m) ease, background-color var(--look-m) ease;
}
/* The place colours of Today follow the set. base.css works them out on the element that carries data-place, and
   <body> (outside the phone) carries one: without these lines the wash at the top of the screen kept Paper. */
[data-look] {
  --pc-bg: var(--today-bg); --pc: var(--today); --pc-d: var(--today-d);
  --tint: color-mix(in srgb, var(--today-bg) 62%, var(--surface));
}
[data-look] [data-place="today"] { --tint: color-mix(in srgb, var(--today-bg) 62%, var(--surface)); }

@media (prefers-reduced-motion: reduce) {
  [data-look] { transition: none; }
}
/* ---------- The six colour sets, light (generated from library.json) ---------- */
[data-look="paper"] {
  --bg: #F5F2EC; --surface: #FFFFFF; --ink: #1A2130; --ink2: #4D5364; --ink3: #666B7B; --line: #E5DFD3;
  --soft: #ECE7DD; --today: #EE9A4D; --today-bg: #FCE4CC; --today-d: #7A3F0C; --nav: #7A3F0C; --on-nav: #FFFFFF;
  --on-today: #FFFFFF; --done: #9DB65C; --on-done: #FFFFFF; --top-a: #FCE4CC; --top-b: #F6C79B; --on-top: #3B2A1A;
  --top-done: linear-gradient(155deg,#9DB65C,#EE9A4D 55%,#7A3F0C);
}
[data-look="sage"] {
  --bg: #EEF2EC; --surface: #FAFCF8; --ink: #1F2B25; --ink2: #4B5A51; --ink3: #66756C; --line: #DCE4DA;
  --soft: #E4EBE2; --today: #5E8F76; --today-bg: #D8E8DD; --today-d: #2B5641; --nav: #2B5641; --on-nav: #FFFFFF;
  --on-today: #FFFFFF; --done: #7DAA90; --on-done: #FFFFFF; --top-a: #DCEBE0; --top-b: #BFD8C8; --on-top: #1F2B25;
  --top-done: linear-gradient(155deg,#7DAA90,#5E8F76 55%,#2B5641);
}
[data-look="sun"] {
  --bg: #FFF6EC; --surface: #FFFFFF; --ink: #2A1A12; --ink2: #5E4A3E; --ink3: #7A665A; --line: #F3E2D2;
  --soft: #FCECDE; --today: #E85A30; --today-bg: #FFE1D3; --today-d: #8F2E12; --nav: #8F2E12; --on-nav: #FFFFFF;
  --on-today: #FFFFFF; --done: #F09A2E; --on-done: #FFFFFF; --top-a: #FFB769; --top-b: #F0643C; --on-top: #FFFFFF;
  --top-done: linear-gradient(155deg,#FFD66B,#FF9A4D 50%,#F2557A);
}
[data-look="ink"] {
  --bg: #F3F4F6; --surface: #FFFFFF; --ink: #10141B; --ink2: #3E4553; --ink3: #5F6674; --line: #E0E3E8;
  --soft: #EAECF0; --today: #4C5B76; --today-bg: #E2E6ED; --today-d: #2C3850; --nav: #2C3850; --on-nav: #FFFFFF;
  --on-today: #FFFFFF; --done: #4C5B76; --on-done: #FFFFFF; --top-a: #E7EAF0; --top-b: #D5DBE5; --on-top: #10141B;
  --top-done: linear-gradient(155deg,#4C5B76,#4C5B76 55%,#2C3850);
}
[data-look="sky"] {
  --bg: #EEF3FF; --surface: #FFFFFF; --ink: #1C2440; --ink2: #4A5478; --ink3: #666F92; --line: #DCE4F6;
  --soft: #E4EBFB; --today: #6F5FE8; --today-bg: #E8E4FF; --today-d: #3B2FA6; --nav: #3B2FA6; --on-nav: #FFFFFF;
  --on-today: #FFFFFF; --done: #3DB892; --on-done: #FFFFFF; --top-a: #3F6AD0; --top-b: #7350D6; --on-top: #FFFFFF;
  --top-done: linear-gradient(155deg,#4CC9A4,#5F8EF0 60%,#9472F0);
}
[data-look="berry"] {
  --bg: #FBF0F3; --surface: #FFFFFF; --ink: #2B1620; --ink2: #61404F; --ink3: #7E5E6B; --line: #F1DCE3;
  --soft: #F7E5EB; --today: #C2416E; --today-bg: #F9DAE5; --today-d: #7A1F42; --nav: #7A1F42; --on-nav: #FFFFFF;
  --on-today: #FFFFFF; --done: #D9688F; --on-done: #FFFFFF; --top-a: #F5B8CC; --top-b: #D96A93; --on-top: #2B1620;
  --top-done: linear-gradient(155deg,#D9688F,#C2416E 55%,#7A1F42);
}
/* ---------- Dark: the phone in dark mode, and the app set to dark ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-look="paper"] {
  --bg: #161513; --surface: #211F1C; --ink: #F2EFE9; --ink2: #BDB8AE; --ink3: #9A958B; --line: #35322D;
  --soft: #2B2925; --today: #E9A262; --today-bg: #46301A; --today-d: #F8D2AC; --nav: #F8D2AC; --on-nav: #2A1B0C;
  --on-today: #161513; --done: #8AA24E; --on-done: #161513; --top-a: #46301A; --top-b: #2E2012; --on-top: #F8D2AC;
  --top-done: linear-gradient(155deg,#8AA24E,#E9A262 55%,#F8D2AC);
}
:root:not([data-theme="light"]) [data-look="sage"] {
  --bg: #121714; --surface: #1A211D; --ink: #E6EEE9; --ink2: #B3C1B8; --ink3: #8D9B93; --line: #29332D;
  --soft: #212A25; --today: #8DBFA4; --today-bg: #22362B; --today-d: #C6E5D3; --nav: #C6E5D3; --on-nav: #161513;
  --on-today: #161513; --done: #79AC90; --on-done: #161513; --top-a: #22362B; --top-b: #17241D; --on-top: #E6EEE9;
  --top-done: linear-gradient(155deg,#79AC90,#8DBFA4 55%,#C6E5D3);
}
:root:not([data-theme="light"]) [data-look="sun"] {
  --bg: #1A120D; --surface: #25190F; --ink: #FBEFE6; --ink2: #D8C2B3; --ink3: #A99485; --line: #3A2A1F;
  --soft: #2F2117; --today: #FF8A63; --today-bg: #47231A; --today-d: #FFD0BE; --nav: #FFD0BE; --on-nav: #161513;
  --on-today: #161513; --done: #F5B65A; --on-done: #161513; --top-a: #9C4A20; --top-b: #6A2614; --on-top: #FFF1E8;
  --top-done: linear-gradient(155deg,#F5B65A,#FF8A63 55%,#FFD0BE);
}
:root:not([data-theme="light"]) [data-look="ink"] {
  --bg: #0E1014; --surface: #181B21; --ink: #EEF0F4; --ink2: #B7BDC8; --ink3: #8B92A0; --line: #2A2E37;
  --soft: #20242C; --today: #9AA8C4; --today-bg: #1F2533; --today-d: #CBD3E3; --nav: #CBD3E3; --on-nav: #161513;
  --on-today: #161513; --done: #9AA8C4; --on-done: #161513; --top-a: #1F2533; --top-b: #151A24; --on-top: #EEF0F4;
  --top-done: linear-gradient(155deg,#9AA8C4,#9AA8C4 55%,#CBD3E3);
}
:root:not([data-theme="light"]) [data-look="sky"] {
  --bg: #10131F; --surface: #181C2C; --ink: #ECEFFC; --ink2: #B9C0DE; --ink3: #8D95B6; --line: #29304A;
  --soft: #20263B; --today: #A69CFF; --today-bg: #2B2853; --today-d: #DAD5FF; --nav: #DAD5FF; --on-nav: #161513;
  --on-today: #161513; --done: #5ED3B0; --on-done: #161513; --top-a: #2A3F7A; --top-b: #46327E; --on-top: #F2F0FF;
  --top-done: linear-gradient(155deg,#5ED3B0,#A69CFF 55%,#DAD5FF);
}
:root:not([data-theme="light"]) [data-look="berry"] {
  --bg: #1A0F14; --surface: #25161D; --ink: #F8EAF0; --ink2: #D7B9C6; --ink3: #A98C99; --line: #3B2530;
  --soft: #301D26; --today: #EE7FA6; --today-bg: #4A1F31; --today-d: #FBCADB; --nav: #FBCADB; --on-nav: #161513;
  --on-today: #161513; --done: #E58AAB; --on-done: #161513; --top-a: #6E2742; --top-b: #4A1A2E; --on-top: #FFEAF2;
  --top-done: linear-gradient(155deg,#E58AAB,#EE7FA6 55%,#FBCADB);
}
}
:root[data-theme="dark"] [data-look="paper"] {
  --bg: #161513; --surface: #211F1C; --ink: #F2EFE9; --ink2: #BDB8AE; --ink3: #9A958B; --line: #35322D;
  --soft: #2B2925; --today: #E9A262; --today-bg: #46301A; --today-d: #F8D2AC; --nav: #F8D2AC; --on-nav: #2A1B0C;
  --on-today: #161513; --done: #8AA24E; --on-done: #161513; --top-a: #46301A; --top-b: #2E2012; --on-top: #F8D2AC;
  --top-done: linear-gradient(155deg,#8AA24E,#E9A262 55%,#F8D2AC);
}
:root[data-theme="dark"] [data-look="sage"] {
  --bg: #121714; --surface: #1A211D; --ink: #E6EEE9; --ink2: #B3C1B8; --ink3: #8D9B93; --line: #29332D;
  --soft: #212A25; --today: #8DBFA4; --today-bg: #22362B; --today-d: #C6E5D3; --nav: #C6E5D3; --on-nav: #161513;
  --on-today: #161513; --done: #79AC90; --on-done: #161513; --top-a: #22362B; --top-b: #17241D; --on-top: #E6EEE9;
  --top-done: linear-gradient(155deg,#79AC90,#8DBFA4 55%,#C6E5D3);
}
:root[data-theme="dark"] [data-look="sun"] {
  --bg: #1A120D; --surface: #25190F; --ink: #FBEFE6; --ink2: #D8C2B3; --ink3: #A99485; --line: #3A2A1F;
  --soft: #2F2117; --today: #FF8A63; --today-bg: #47231A; --today-d: #FFD0BE; --nav: #FFD0BE; --on-nav: #161513;
  --on-today: #161513; --done: #F5B65A; --on-done: #161513; --top-a: #9C4A20; --top-b: #6A2614; --on-top: #FFF1E8;
  --top-done: linear-gradient(155deg,#F5B65A,#FF8A63 55%,#FFD0BE);
}
:root[data-theme="dark"] [data-look="ink"] {
  --bg: #0E1014; --surface: #181B21; --ink: #EEF0F4; --ink2: #B7BDC8; --ink3: #8B92A0; --line: #2A2E37;
  --soft: #20242C; --today: #9AA8C4; --today-bg: #1F2533; --today-d: #CBD3E3; --nav: #CBD3E3; --on-nav: #161513;
  --on-today: #161513; --done: #9AA8C4; --on-done: #161513; --top-a: #1F2533; --top-b: #151A24; --on-top: #EEF0F4;
  --top-done: linear-gradient(155deg,#9AA8C4,#9AA8C4 55%,#CBD3E3);
}
:root[data-theme="dark"] [data-look="sky"] {
  --bg: #10131F; --surface: #181C2C; --ink: #ECEFFC; --ink2: #B9C0DE; --ink3: #8D95B6; --line: #29304A;
  --soft: #20263B; --today: #A69CFF; --today-bg: #2B2853; --today-d: #DAD5FF; --nav: #DAD5FF; --on-nav: #161513;
  --on-today: #161513; --done: #5ED3B0; --on-done: #161513; --top-a: #2A3F7A; --top-b: #46327E; --on-top: #F2F0FF;
  --top-done: linear-gradient(155deg,#5ED3B0,#A69CFF 55%,#DAD5FF);
}
:root[data-theme="dark"] [data-look="berry"] {
  --bg: #1A0F14; --surface: #25161D; --ink: #F8EAF0; --ink2: #D7B9C6; --ink3: #A98C99; --line: #3B2530;
  --soft: #301D26; --today: #EE7FA6; --today-bg: #4A1F31; --today-d: #FBCADB; --nav: #FBCADB; --on-nav: #161513;
  --on-today: #161513; --done: #E58AAB; --on-done: #161513; --top-a: #6E2742; --top-b: #4A1A2E; --on-top: #FFEAF2;
  --top-done: linear-gradient(155deg,#E58AAB,#EE7FA6 55%,#FBCADB);
}