/* looks.css (v0.31): Docket's other palettes and paper textures (V4 §5.5–5.9, §20.2), switched in
   Settings → Colors and Paper texture. Built as candidates for Zack to choose from; he kept all
   three of each as a setting (v0.33), with Olive and Faint (tokens.css) as the defaults.

   Palettes (html[data-palette]): "olive" is tokens.css as it was (from Zack's mock-ups); "sage"
   and "bark" are below, drawn from the same reference boards. Every text pair meets WCAG AA
   (4.5:1; body text 7:1), page pairs even under the strongest grain (DESIGN.md "Color tokens",
   browser tests section 43). Notebook and people colors (--c-*) are Zack's approved twenty and
   stay the same in every palette.
   Texture (html[data-texture]): "faint" is the default in tokens.css; "off" and "full" are below. */

/* Sage, light: ivory and lichen neutrals, a deeper forest green for actions, forest-charcoal text. */
html[data-palette="sage"][data-theme="light"] {
  --bg: #ECEEE4;
  --surface: #FAFAF5;
  --surface-hover: #F4F4EE;
  --surface-sunken: #E7EADF;
  --field: #FFFFFB;
  --field-border: #CDD2C3;
  --border: #DADDD1;
  --border-strong: #C3C8B8;
  --text: #1C211A;
  --text-muted: #575E52;
  --text-faint: #62685B;
  --title: #2A3623;
  --primary: #47513C;
  --primary-hover: #3B4432;
  --on-primary: #FAFAF4;
  --primary-soft: #DEE6D3;
  --focus: #3E5236;
  --chip: #E2E7D8;
  --chip-text: #3B4634;
  --chip-soft: #EBEFE3;
  --info: #DCE4E4;
  --info-text: #38525C;
  --overdue: #F2DED7;
  --overdue-text: #874233;
  --danger: #9A4634;
  --danger-hover: #853A2A;
  --on-danger: #FFFDF8;
  --prio-high: #C27E69;
  --prio-medium: #D1A54E;
  --prio-low: #7D9071;
  --done: #7B8A72;
  --archived: #ADA89D;
  --toast-bg: #26301F;
  --toast-text: #F2F3EA;
  --toast-action: #C3D6A7;
  --shadow: 0 1px 2px rgba(44, 54, 38, 0.06), 0 2px 8px rgba(44, 54, 38, 0.05);
  --shadow-raised: 0 8px 30px rgba(44, 54, 38, 0.15), 0 2px 6px rgba(44, 54, 38, 0.08);
  --backdrop: rgba(40, 50, 36, 0.26);
  --on-color: #1C211A;
}

/* Sage, dark: deep forest green rather than moss-charcoal; fern-green actions, pale sage focus. */
html[data-palette="sage"][data-theme="dark"] {
  --bg: #1D2720;
  --surface: #27322A;
  --surface-hover: #2D3930;
  --surface-sunken: #222C25;
  --field: #202A23;
  --field-border: #46564A;
  --border: #37453A;
  --border-strong: #47564A;
  --text: #EEF1E7;
  --text-muted: #C2CBBB;
  --text-faint: #9DA797;
  --title: #E1E8D4;
  --primary: #4C6B4D;
  --primary-hover: #56775A;
  --on-primary: #F3F6EC;
  --primary-soft: #2F3D32;
  --focus: #A9CBA0;
  --chip: #323E35;
  --chip-text: #D3DBCD;
  --chip-soft: #2B362E;
  --info: #29363A;
  --info-text: #C2D4D8;
  --overdue: #442D27;
  --overdue-text: #EBB2A1;
  --danger: #9C4A37;
  --danger-hover: #AD5641;
  --on-danger: #FFF6EE;
  --prio-high: #C98672;
  --prio-medium: #D2A955;
  --prio-low: #8DA27F;
  --done: #73886A;
  --archived: #8F897C;
  --toast-bg: #ECF0E4;
  --toast-text: #1C251E;
  --toast-action: #3E5A3B;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.14);
  --shadow-raised: 0 10px 34px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  --backdrop: rgba(10, 16, 12, 0.5);
  --on-color: #161C17;
}

/* Bark, light: warmer parchment and cream, bark-brown text and titles, a warm moss for actions, clay notes. */
html[data-palette="bark"][data-theme="light"] {
  --bg: #EDE5D8;
  --surface: #FBF7EF;
  --surface-hover: #F5EFE5;
  --surface-sunken: #E9E0D2;
  --field: #FFFCF6;
  --field-border: #D3C7B5;
  --border: #DED3C2;
  --border-strong: #C9BCA9;
  --text: #2A231C;
  --text-muted: #665A4E;
  --text-faint: #6A5F53;
  --title: #3D2F25;
  --primary: #5E6744;
  --primary-hover: #4F5738;
  --on-primary: #FFFCF5;
  --primary-soft: #E7E6D5;
  --focus: #4E5A35;
  --chip: #EADFCF;
  --chip-text: #4D3F31;
  --chip-soft: #F1E9DD;
  --info: #DFE4E3;
  --info-text: #3E5560;
  --overdue: #F3DCD1;
  --overdue-text: #8A4632;
  --danger: #9C4A37;
  --danger-hover: #873E2D;
  --on-danger: #FFFDF8;
  --prio-high: #C17A60;
  --prio-medium: #D5A04A;
  --prio-low: #7F8B66;
  --done: #858567;
  --archived: #B9A996;
  --toast-bg: #342B23;
  --toast-text: #F6EFE4;
  --toast-action: #CDD5AB;
  --shadow: 0 1px 2px rgba(72, 54, 34, 0.07), 0 2px 8px rgba(72, 54, 34, 0.05);
  --shadow-raised: 0 8px 30px rgba(72, 54, 34, 0.16), 0 2px 6px rgba(72, 54, 34, 0.08);
  --backdrop: rgba(62, 48, 34, 0.26);
  --on-color: #2A231C;
}

/* Bark, dark: peat and bark browns; moss actions, lichen focus. */
html[data-palette="bark"][data-theme="dark"] {
  --bg: #25201B;
  --surface: #302A24;
  --surface-hover: #373029;
  --surface-sunken: #2A241F;
  --field: #28221D;
  --field-border: #554B40;
  --border: #453C33;
  --border-strong: #564C41;
  --text: #F3ECE0;
  --text-muted: #D0C5B4;
  --text-faint: #ABA090;
  --title: #EFE3CB;
  --primary: #5E6A44;
  --primary-hover: #66724A;
  --on-primary: #F7F2E4;
  --primary-soft: #3B3B2C;
  --focus: #C4CB9C;
  --chip: #3E362E;
  --chip-text: #DDD3C3;
  --chip-soft: #373029;
  --info: #2F3637;
  --info-text: #CBD6D8;
  --overdue: #4A302A;
  --overdue-text: #EEB5A3;
  --danger: #9C4A37;
  --danger-hover: #AD5641;
  --on-danger: #FFF6EE;
  --prio-high: #CB8670;
  --prio-medium: #D4A853;
  --prio-low: #929C74;
  --done: #7D8463;
  --archived: #9A8E7F;
  --toast-bg: #F3ECDF;
  --toast-text: #2A231C;
  --toast-action: #4E5A35;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 2px 10px rgba(0, 0, 0, 0.15);
  --shadow-raised: 0 10px 34px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.26);
  --backdrop: rgba(16, 12, 9, 0.5);
  --on-color: #1E1914;
}

/* Paper texture: Off, Faint (tokens.css) or Full, the same grain twice as strong. */
html[data-texture="off"][data-theme] { --grain: none; }
html[data-texture="full"][data-theme="light"] {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .16 .56 0 0 0 -.21'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-texture="full"][data-theme="dark"] {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96 0 0 0 0 .93 0 0 0 0 .84 .22 0 0 0 -.083'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}