/* VOZ-style theme — palette sampled from voz.vn */

/* Two palettes share one set of token names. `:root` is the light palette; the dark block
   below re-points the same names. Components never hardcode a colour, so setting
   data-theme on <html> is the only thing needed to flip the whole reading surface.

   The page chrome (header, nav, footer) is intentionally identical in both modes: voz.vn's
   own styling there is already dark, and changing it would make the switch feel like a
   different site rather than a reading preference. */
:root {
  /* chrome — dark in both themes */
  --header-bg: #363d45;
  --header-fg: #d1d4d6;
  --nav-bg: #363d45;
  --chrome-page-bg: #373d43;
  --nav-fg: #d1d4d6;
  --nav-active: #ff6600;
  /* Accent for text/state on the reading surface. --nav-active is the untouched brand orange
     and is only used on the dark chrome; on light surfaces it fails AA as text, so state
     text (an active reaction) uses this darker sibling instead. */
  --accent-text: #a84300;
  /* Controls that live ON the chrome are frozen: the chrome is identical in both themes, so
     these must not follow the reading surface or the header search would invert underneath
     its own dark background. */
  --chrome-field-bg: #eff0f0;
  --chrome-field-fg: #202122;
  --chrome-field-hover: #6b80ab;
  --chrome-avatar-bg: #4a525b;
  /* Muted text that sits on the dark page background (breadcrumbs). Frozen for the same
     reason as the field colours: the background behind it never changes with the theme. */
  --chrome-dimmed: #adb3bb;
  --footer-bg: #102138;
  --footer-fg: #ebf1f9;

  --block-header-bg: #5c7099;
  --block-header-hover: #4c5f83;
  --block-header-fg: #f2f4f8;
  --link: #23497b;
  /* voz.vn's hover orange. As *text on a light surface* pure #ff6600 only reaches 2.7:1, so
     the token carries a darkened variant that clears AA while keeping the same hue; the
     untouched brand orange stays for chrome accents (--nav-active, badges, CTA). */
  --link-hover: #a84300;
  --text: #202122;
  /* Muted text sits on white, #f4f5f5, #eef0f1, #eaeaeb and #dfe2e4 depending on the
     component. #606569 is the lightest grey that still clears 4.5:1 on all of them (worst
     case 4.53 on the #dfe2e4 chip), so secondary text never drops below WCAG AA. */
  --dimmed: #606569;
  --page-bg: var(--chrome-page-bg);
  --content-bg: #f4f5f5;
  --content-bg-alt: #eef0f1;
  --border: #d5d8db;
  --border-faint: #e2e5e8;
  /* Page-jump numbers sit on --content-bg-alt; #6b7075 only reached 4.37 there. */
  --dimmed-2: #63686d;
  --quote-bg: #eaeaeb;
  --quote-border: #ff944c;

  /* surfaces and controls that were previously hardcoded per file */
  --surface: #fff;                 /* input fields, menu rows, cards */
  --surface-sunken: #eff0f0;       /* header search pill, flat list backgrounds */
  --surface-raised: #dfe2e4;       /* separators and small chips above --surface */
  --surface-hover: #f4f5f5;        /* menu row hover */
  --surface-accent: #dfe7f6;       /* pager cells, primary label chips */
  --surface-accent-hover: #cfdcf2;
  --surface-tint: #dce3ed;         /* toolbar/picker active + hover tint */
  --surface-code: #edf0f5;         /* <pre> and atomic BBCode blocks */
  --surface-editor-panel: #f4f6fb;
  --surface-quote: #eef3f9;        /* blockquote inside the editor preview */
  --border-code: #a3adc0;
  --border-atomic: #8999b4;

  /* callouts — unread rows, danger/success messages, toasts */
  --unread-bg: #fff8f2;
  --unread-bg-strong: #fff2e5;
  --info-bg: #eef3fb;
  --danger-text: #a12626;
  --danger-text-strong: #c62828;
  --danger-bg: #fdeaea;
  --danger-border: #e0b4b4;
  --success-text: #256b25;
  --success-text-strong: #1b6e2d;
  --success-bg: #eaf6ea;
  --success-border: #b4dcb4;

  /* text and overlays drawn on the dark chrome */
  --on-dark: #fff;
  --on-accent: #fff;
  --chip-fg: #e6e8ea;
  --chip-bg: #2b3138;
  --overlay-header: rgba(255, 255, 255, .14);  --overlay-header-strong: rgba(255, 255, 255, .28);
  --overlay-hairline: rgba(255, 255, 255, .06);
  --shadow-menu: 0 6px 20px rgba(0, 0, 0, .31);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .31);
  --shadow-pop: 0 3px 7px rgba(0, 0, 0, .13);
  --shadow-fab: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-avatar: inset 0 0 0 1px rgba(0, 0, 0, .1);
  --scrim: rgba(0, 0, 0, .5);

  --focus-ring: #b9c6dd;
  --focus-ring-warm: #ffba8c;
  --on-chrome-muted: #ebeced;
  --on-chrome-link: #9fc0ea;
  --node-icon: #a1a6ae;

  --radius: 4px;
  --max-width: 1058px;
    /* The stock stack, used until ui/theme.js applies the reader's choice (and permanently for
       `system`). It names "Be Vietnam" first because that is FONT_DEFAULT: the face is declared
       in font-default.css, which index.html links, so this stack resolves on the very first
       paint instead of falling through to the OS font. */
    --font-post: "Be Vietnam", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-control: "Be Vietnam", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font: var(--font-control);
    /* Cỡ chữ: --ui-scale sizes everything outside a post body, --post-scale sizes the prose
       inside one. Both are unitless multipliers set from Cài đặt (lib/settings.js). Sizes that
       can appear inside a post use calc(<px> * var(--post-scale)); everything else uses
       var(--ui-scale). A post body sets --ui-scale to var(--post-scale) for its subtree so a
       nested component (a quoted card, a code block) keeps scaling with the post, not the page. */
    --ui-scale: 1;
    --post-scale: 1;
    /* The bold grade every `font-weight: 600` / `700` in the stylesheets resolves to. 600 is
       the stock value; theme.css re-points it to 500 for the families whose 600 slot holds a
       full Bold (see the note there). */
    --fw-bold: 600;
  }

/* Dark reading surface: same token names, re-pointed. Values keep body text and links at or
   above WCAG AA against their own background — see the contrast notes in
   voz-forum-deploy.md §Giao diện. */
:root[data-theme="dark"] {
  --header-bg: #181a1b;
  --nav-bg: #181a1b;
  --chrome-page-bg: #181a1b;
  --block-header-bg: #46536b;
  --block-header-hover: #526180;
  --block-header-fg: #e7ebf2;
  --link: #8ab4f8;
  --link-hover: #ffa04d;
  --accent-text: #ffb070;
  --text: #e4e6ea;
  --dimmed: #9aa1ab;
  --dimmed-2: #a8b0bb;
  --page-bg: var(--chrome-page-bg);
  --content-bg: #202324;
  --content-bg-alt: #252829;
  --border: #3a424c;
  --border-faint: #333a43;
  --quote-bg: #2a3038;
  --quote-border: #ffb070;

  --surface: #292d2e;
  --surface-sunken: #252829;
  --surface-raised: #343839;
  --surface-hover: #303536;
  --surface-accent: #343a3b;
  --surface-accent-hover: #414849;
  --surface-tint: #353b3c;
  --surface-code: #25292a;
  --surface-editor-panel: #252829;
  --surface-quote: #292e2f;
  --border-code: #4b5354;
  --border-atomic: #5a6364;

  --unread-bg: #33291f;
  --unread-bg-strong: #3a2d20;
  --info-bg: #253041;
  --danger-text: #ff9a9a;
  --danger-text-strong: #ff8a8a;
  --danger-bg: #3a2426;
  --danger-border: #6b3b3b;
  --success-text: #8fd48f;
  --success-text-strong: #8fd48f;
  --success-bg: #23331f;
  --success-border: #3f5c3a;

  --chip-fg: #e6e8ea;
  --chip-bg: #333a44;
  /* --link is light in dark mode, so anything drawn on a link-coloured surface must be dark */
  --on-accent: #1b1f24;
  --shadow-menu: 0 6px 20px rgba(0, 0, 0, .55);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .55);
  --shadow-pop: 0 3px 7px rgba(0, 0, 0, .45);
  --shadow-fab: 0 2px 8px rgba(0, 0, 0, .55);
  --shadow-avatar: inset 0 0 0 1px rgba(255, 255, 255, .12);
  --scrim: rgba(0, 0, 0, .66);

  --focus-ring: #6f8dc0;
  --node-icon: #7d8590;
}

* { box-sizing: border-box; }

html { background: var(--page-bg); }

/* The header + nav are sticky, so an anchor jump or scrollIntoView() would land the target
   underneath them. scroll-padding-top reserves their combined height (published as --chrome-h
   by ui/chromeAutoHide.js) and is the only mechanism that also applies to the programmatic
   scrolls the app performs, not just hash navigation. */
html { scroll-padding-top: var(--chrome-h, 0px); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: calc(16px * var(--ui-scale));
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

/* ---------- utilities ---------- */
.u-dimmed { color: var(--dimmed); }
.u-smaller { font-size: calc(13px * var(--ui-scale)); }
.u-muted { color: var(--dimmed); }
.u-nowrap { white-space: nowrap; }
.u-right { text-align: right; }
.u-center { text-align: center; }
.u-hidden { display: none !important; }
.u-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}