/* tokens.css: every color, font and radius Docket uses, named by role (never by hue), so a
   theme changes in one place. Values: DESIGN.md. Light is the default; dark is applied by
   html[data-theme="dark"] (set from the System / Light / Dark setting). These are the "Olive"
   palette, the default; looks.css holds the other two (Sage, Bark), chosen in Settings. */

@font-face {
  font-family: 'Docket Serif';
  src: url('../../assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Docket Serif';
  src: url('../../assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Docket Serif', 'EB Garamond', Garamond, 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --font-ui: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --radius: 10px;
  --radius-small: 8px;
  --radius-large: 14px;
  --column: 900px;
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F4EEE6;
  --surface: #FAF7F2;
  --surface-hover: #F5F0E8;
  --surface-sunken: #EFE8DD;
  --field: #FFFDF9;
  --field-border: #D8D0C3;
  --border: #E2DACE;
  --border-strong: #CFC6B8;
  --text: #1F2117;
  --text-muted: #66655A;
  --text-faint: #6F6C62; /* 4.5:1 or better on page, cards and fields (review R09; was #8B887E) */
  --title: #272A10;
  --primary: #6E7556;
  --primary-hover: #5F6649;
  --on-primary: #FFFDF8;
  --primary-soft: #E5E7D8;
  --focus: #4F5A3A;
  --chip: #ECE6DB;
  --chip-text: #4A4637;
  --chip-soft: #F1ECE3;
  --info: #DFE5E7;
  --info-text: #3E5667;
  --overdue: #F1DED8;
  --overdue-text: #874B3B;
  --danger: #9C4A37;
  --danger-hover: #873E2D;
  --on-danger: #FFFDF8;
  --prio-high: #C0806C;
  --prio-medium: #D9A650;
  --prio-low: #7F8C6E;
  --done: #838971;
  --archived: #B7AA9E;
  --toast-bg: #2F3328;
  --toast-text: #F4EFE3;
  --toast-action: #C9D3AE;
  --shadow: 0 1px 2px rgba(60, 52, 38, 0.06), 0 2px 8px rgba(60, 52, 38, 0.05);
  --shadow-raised: 0 8px 30px rgba(60, 52, 38, 0.16), 0 2px 6px rgba(60, 52, 38, 0.08);
  --backdrop: rgba(58, 52, 40, 0.26);
  /* v0.31: the page's paper grain at "Faint", the default (V4 §5.8; looks.css holds Off and Full,
     chosen in Settings). It sits on the page itself, never behind cards (they're opaque). */
  --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 .3 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* people / notebook colors (named, stored by name) */
  --c-sage: #A9B39A; --c-moss: #7F8C6E; --c-clay: #C29A84; --c-ochre: #D2AA62;
  --c-mist: #A9B8BF; --c-blush: #D2B4AB; --c-bark: #7A6859; --c-stone: #A69F92;
  /* v0.18: eight more notebook colors in the same family (boards' olive/forest, plus earthy
     terracotta, sand, juniper, slate, heather and plum), for the notebook color chooser */
  --c-terracotta: #B4775F; --c-sand: #CDB78F; --c-olive: #A3A26C; --c-forest: #56664B;
  --c-juniper: #7F9E95; --c-slate: #7C8C9C; --c-heather: #AB9BB2; --c-plum: #8F6E80;
  /* v0.19: twenty — a dusty blue, a warm brown and two greys (light and dark) */
  --c-lake: #6A8DAD; --c-walnut: #7E5B45; --c-pebble: #C3BFB6; --c-charcoal: #5C5B55;
  --on-color: #1F2117;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1F231B;
  --surface: #2A2E24;
  --surface-hover: #30352A;
  --surface-sunken: #252920;
  --field: #23271F;
  --field-border: #4A5141;
  --border: #3E4436;
  --border-strong: #4E5545;
  --text: #F3EEE1;
  --text-muted: #CDC6B5;
  --text-faint: #A8A293;
  --title: #EEE6CC;
  --primary: #5A6644;
  --primary-hover: #66734E;
  --on-primary: #F6F2E4;
  --primary-soft: #353B2C;
  --focus: #B9C49E;
  --chip: #383C30;
  --chip-text: #DAD6C7;
  --chip-soft: #32362B;
  --info: #2F3836;
  --info-text: #CAD6D9;
  --overdue: #45302A;
  --overdue-text: #EDB6A6;
  --danger: #9C4A37;
  --danger-hover: #AD5641;
  --on-danger: #FFF6EE;
  --prio-high: #C98672;
  --prio-medium: #D4A853;
  --prio-low: #8E9C74;
  --done: #76825F;
  --archived: #978D7F;
  --toast-bg: #F1ECDF;
  --toast-text: #23271E;
  --toast-action: #4F5A3A;
  --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(12, 14, 10, 0.5);
  --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 .12 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --c-sage: #8F9B79; --c-moss: #6E7A5C; --c-clay: #B0806C; --c-ochre: #C29A50;
  --c-mist: #8A9AA2; --c-blush: #B6968D; --c-bark: #8D7A69; --c-stone: #8F887B;
  --c-terracotta: #A86A52; --c-sand: #B39D74; --c-olive: #8E8D58; --c-forest: #5A6B4E;
  --c-juniper: #6A8A80; --c-slate: #6E7E8E; --c-heather: #9484A0; --c-plum: #8A6878;
  --c-lake: #5F7F9C; --c-walnut: #8C6650; --c-pebble: #A5A299; --c-charcoal: #6E6C65;
  --on-color: #1A1D15;
}