/* The redesign's palette and type: printed paper, ink, burnt orange, amber highlighter.
   With tokens.css, the only files where a colour literal may appear.
   Light, Dim and Dark are redrawn here; the novelty themes keep their own palettes. */
:root {
  --font-sans: 'Chakra Petch', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mast-band: 56px;
  --mast-strip: 40px;
  --topbar-height: calc(var(--mast-band) + var(--mast-strip));
  --gutter: 32px;
  --rule: 3px;
  --tracking-label: 0.08em;
  --tracking-th: 0.08em;

  /* square: nothing is rounded */
  --radius-control: 0px;
  --radius-panel: 0px;
  --radius-menu: 0px;
  --radius-badge: 0px;
  --radius-chip: 0px;
  --radius-round: 0px;

  /* names kept from the first shell; pages read them for "ink on amber" and the index sheet */
  --rail-bg: #17130e;
  --rail-text: #f3ebda;
  --rail-text-strong: #ffffff;
  --rail-muted: #b8ad98;
  --rail-hover-bg: #2a231a;
  --rail-active-bg: #2a231a;
  --rail-line: #3a3126;
  --rail-accent: #f0a818;
  --rail-accent-ink: #17130e;
  --rail-accent-hover: #ffc247;
}

:root[data-theme="light"], :root:not([data-theme]) {
  --color-page-bg: #f3ebda;
  --color-surface: #f3ebda;
  --color-surface-alt: #eae0ca;
  --color-surface-sunken: #dfd3b8;
  --color-border: #d3c6a8;
  --color-border-strong: #17130e;

  --color-text: #17130e;
  --color-text-muted: #5a5245;
  --color-label: #37312a;
  --color-text-input: #17130e;
  --color-text-faint: #a89c84;
  --color-text-inverse: #f3ebda;

  --color-link: #a03a10;
  --color-link-hover: #17130e;
  --color-primary: #f0a818;
  --color-primary-hover: #d99500;
  --color-on-primary: #f3ebda;
  --color-primary-strong: #17130e;
  --color-primary-strong-hover: #3a3126;
  --color-danger: #c81e1e;
  --color-danger-hover: #9f1515;
  --color-focus: #17130e;
  --color-focus-ring: rgba(23, 19, 14, 0.4);

  --color-create: #b5451b;
  --color-create-hover: #8f3413;
  --color-create-strong: #b5451b;
  --color-create-strong-hover: #8f3413;
  --color-warning: #b45309;
  --color-warning-hover: #8f4207;
  --color-warning-strong: #b45309;
  --color-warning-strong-hover: #8f4207;
  --color-on-button: #ffffff;
  --color-cancel: #5a5245;
  --color-cancel-hover: #37312a;

  --color-topbar-bg: #b5451b;
  --color-topbar-text: #ffffff;
  --color-topbar-muted: #ffe6d6;
  --color-nav-bg: #b5451b;
  --color-nav-text: #ffffff;
  --color-nav-hover-bg: #8f3413;
  --color-nav-active-bg: #f3ebda;
  --color-nav-active-text: #17130e;
  --color-nav-text-shadow: transparent;
  --color-store-link: #ffe6d6;
  --color-store-icon: #ffe6d6;
  --color-avatar-bg: #17130e;
  --color-avatar-text: #f0a818;
  --color-menu-bg: #fffaf0;
  --color-menu-border: #17130e;
  --color-menu-hover-bg: #17130e;
  --color-menu-hover-text: #f3ebda;
  --color-search-bg: #8f3413;
  --color-search-border: #8f3413;
  --color-search-placeholder: #ffe6d6;

  --color-th-bg: #f3ebda;
  --color-th-text: #17130e;
  --color-th-border: #17130e;
  --color-th-bar: #17130e;
  --color-row-stripe: #f3ebda;
  --color-row-hover: #eae0ca;
  --color-row-selected: #fbe3a6;
  --color-accent-tint: #fbe3a6;
  --color-date-band-bar: #d3c6a8;

  --color-input-bg: #fffaf0;
  --color-input-border: #17130e;
  --color-input-shadow: transparent;
  --color-addon-bg: #eae0ca;
  --color-icon-btn: #17130e;
  --color-icon-btn-ring: #17130e;
  --color-btn-bg: #f3ebda;
  --color-btn-text: #17130e;
  --color-btn-border: #17130e;
  --color-tile: #17130e;
  --color-tile-hover: #3a3126;
  --color-dash-panel: #f3ebda;
  --color-dash-track: #dfd3b8;
  --color-dash-fill: #17130e;
  --color-section-count: #f0a818;
  --color-tag-border: #17130e;
  --color-tab-active-bg: #17130e;
  --color-footer-text: #5a5245;
  --color-shadow: transparent;
  --color-modal-shadow: transparent;
  --color-backdrop: rgba(23, 19, 14, 0.72);
  --shadow-overlay: 0 0 0 1px var(--color-text);
  --color-pictogram: #a89c84;

  --color-flash-success: #17663a;
  --color-flash-error: #c81e1e;
  --color-flash-info: #17130e;
  --color-success-bg: #dcebd3;
  --color-success-ink: #14522d;
  --color-success-border: #14522d;
  --color-error-bg: #f6d5cd;
  --color-error-ink: #8f1414;
  --color-error-border: #8f1414;
  --color-info-bg: #fbe3a6;
  --color-info-ink: #17130e;
  --color-info-border: #17130e;
  --color-warn-bg: #f6d9c4;
  --color-warn-ink: #7a2e0c;
  --color-warn-border: #7a2e0c;
  --color-neutral-bg: #eae0ca;
  --color-neutral-ink: #37312a;
  --color-neutral-border: #a89c84;
  --color-dark-bg: #17130e;
  --color-dark-ink: #f3ebda;
  --color-weekend: #eae0ca;

  --module-dashboard: #f0a818;
  --module-reports: #b5451b;
  --tile-blue: #17130e;
}

:root[data-theme="dark"], :root[data-theme="dim"] {
  --color-page-bg: #14110d;
  --color-surface: #14110d;
  --color-surface-alt: #1f1a14;
  --color-surface-sunken: #2a231a;
  --color-border: #3a3126;
  --color-border-strong: #f3ebda;
  --color-text: #f3ebda;
  --color-text-muted: #b8ad98;
  --color-label: #dfd3b8;
  --color-text-input: #f3ebda;
  --color-text-inverse: #14110d;
  --color-link: #ff9d6b;
  --color-link-hover: #f3ebda;
  --color-primary: #f0a818;
  --color-on-primary: #14110d;
  --color-primary-strong: #f3ebda;
  --color-primary-strong-hover: #ffffff;
  --color-focus: #f0a818;
  --color-create: #d2562a;
  --color-create-strong: #b5451b;
  --color-create-strong-hover: #d2562a;
  --color-on-button: #ffffff;
  --color-menu-bg: #1f1a14;
  --color-menu-border: #f3ebda;
  --color-menu-hover-bg: #f3ebda;
  --color-menu-hover-text: #14110d;
  --color-th-bg: #14110d;
  --color-th-text: #f3ebda;
  --color-th-border: #f3ebda;
  --color-row-stripe: #14110d;
  --color-row-hover: #1f1a14;
  --color-row-selected: #4a3608;
  --color-accent-tint: #4a3608;
  --color-input-bg: #0c0a07;
  --color-input-border: #f3ebda;
  --color-btn-bg: #14110d;
  --color-btn-text: #f3ebda;
  --color-btn-border: #f3ebda;
  --color-icon-btn: #f3ebda;
  --color-icon-btn-ring: #f3ebda;
  --color-avatar-bg: #14110d;
  --color-avatar-text: #f0a818;
  --color-tab-active-bg: #f3ebda;
  --color-dash-panel: #14110d;
  --color-dash-fill: #f3ebda;
  --color-nav-active-bg: #14110d;
  --color-nav-active-text: #f3ebda;
  --color-shadow: transparent;
  --shadow-overlay: 0 0 0 1px var(--color-text);
  --color-weekend: #1f1a14;
  --color-info-bg: #4a3608;
  --color-info-ink: #f3ebda;
  --color-info-border: #f0a818;
}
:root[data-theme="dim"] {
  --color-page-bg: #221c15;
  --color-surface: #221c15;
  --color-surface-alt: #2c251c;
  --color-th-bg: #221c15;
  --color-row-stripe: #221c15;
  --color-btn-bg: #221c15;
  --color-nav-active-bg: #221c15;
  --color-dash-panel: #221c15;
}

@media screen and (max-width: 1099px) {
  :root { --topbar-height: var(--mast-band); --gutter: 16px; }
}