/* Blog theme skin for GoatCounter (/analytics/).
 * Light + dark aligned with xiaolitongxue666 blog default.css.
 * Toggle via html[data-theme="light"|"dark"] (see analytics-theme.js).
 */

:root,
html[data-theme="light"] {
  --text: #4A4035;
  --bg: #FDF6E3;
  --header-border: #D8A48F;
  --backdrop: #F5E8C7;
  --target-bg: #F5E8C7;
  --loading-text: #666;

  --link: #D8A48F;
  --link-hover: #A8B5A2;

  --input-text: #4A4035;
  --input-bg: #FDF6E3;
  --input-border: #D8A48F;
  --input-focus: #C4846C;

  --btn-text: #4A4035;
  --btn-bg: linear-gradient(#FDF6E3, #F5E8C7);
  --btn-border: #D8A48F;
  --btn-border-outset: #C4846C;
  --btn-hover-bg: linear-gradient(#F5E8C7, #E8D4B0);
  --btn-active-bg: linear-gradient(#E8D4B0, #F5E8C7);

  --code-text: #4A4035;
  --code-bg: #F5E8C7;
  --code-border: #D8A48F;

  --tooltip-text: #4A4035;
  --tooltip-bg: #FDF6E3;
  --tooltip-border: #D8A48F;
  --tooltip-shadow: #C4846C;

  --chart-line: #C4846C;
  --chart-fill: #F5E8C7;
  --chart-grid: #E8D4B0;
  --hchart-border: #D8A48F;
  --hchart-bar: #D8A48F;
  --hchart-bar-hover: #C4846C;

  --nav-bg: #F5E8C7;
  --nav-border: #D8A48F;
  --footer-shadow: #D8A48F;
  --filter-kw-text: #C4846C;

  --event-bg: #F5E8C7;
  --pageviews-text: #666;

  --text-table-even-bg: #F5E8C7;
  --text-table-border: #E8D4B0;
  --text-table-rank-text: #666;

  --widget-border: #E8D4B0;
  --box-bg: #F5E8C7;

  --surface: #FDF6E3;
  --surface-outer: #F5E8C7;
}

html[data-theme="dark"] {
  --text: #e0e0e0;
  --bg: #2d2d2d;
  --header-border: #444;
  --backdrop: #1a1a1a;
  --target-bg: #404040;
  --loading-text: #999;

  --link: #66b3ff;
  --link-hover: #99ccff;

  --input-text: #e0e0e0;
  --input-bg: #2d2d2d;
  --input-border: #444;
  --input-focus: #66b3ff;

  --btn-text: #e0e0e0;
  --btn-bg: linear-gradient(#3a3a3a, #2d2d2d);
  --btn-border: #444;
  --btn-border-outset: #555;
  --btn-hover-bg: linear-gradient(#404040, #333);
  --btn-active-bg: linear-gradient(#333, #404040);

  --code-text: #e0e0e0;
  --code-bg: #1a1a1a;
  --code-border: #444;

  --tooltip-text: #e0e0e0;
  --tooltip-bg: #2d2d2d;
  --tooltip-border: #444;
  --tooltip-shadow: #111;

  --chart-line: #66b3ff;
  --chart-fill: #1a1a1a;
  --chart-grid: #444;
  --hchart-border: #555;
  --hchart-bar: #555;
  --hchart-bar-hover: #66b3ff;

  --nav-bg: #1a1a1a;
  --nav-border: #444;
  --footer-shadow: #111;
  --filter-kw-text: #99ccff;

  --event-bg: #404040;
  --pageviews-text: #999;

  --text-table-even-bg: #252525;
  --text-table-border: #444;
  --text-table-rank-text: #999;

  --widget-border: #444;
  --box-bg: #252525;

  --surface: #2d2d2d;
  --surface-outer: #1a1a1a;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "lucida grande", "lucida sans unicode", lucida, helvetica,
    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !important;
}

/* Opaque surface — overrides hideui `html { background-color: unset }` */
html,
body {
  background-color: var(--surface, #FDF6E3) !important;
  background: var(--surface, #FDF6E3) !important;
  color: var(--text, #4A4035) !important;
  margin: 0 !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

.page,
#dash-widgets,
#page-dashboard {
  background-color: var(--surface, #FDF6E3) !important;
  background: var(--surface, #FDF6E3) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  color: var(--text, #4A4035) !important;
}

.page {
  box-shadow: none !important;
  max-width: unset !important;
}

#dash-widgets {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

nav.center,
#print-header {
  display: none !important;
}

a {
  color: var(--link, #D8A48F) !important;
}

a:hover {
  color: var(--link-hover, #A8B5A2) !important;
}

h1,
h2,
h3,
h4,
.widget-header h2 {
  color: var(--text, #4A4035) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .widget-header h2 {
  color: #b0b0b0 !important;
}