/* Headway Tools — token chữ & màu dùng chung toàn hệ thống */
:root {
  --bg: #f4f7fb;
  --bg-nav: #ffffff;
  --bg-elevated: #ffffff;
  --bg-panel: #eef2f7;
  --bg-hover: #e4ebf4;
  --surface: #ffffff;
  --border: #d5dee9;
  --border-hover: #c5d0de;
  --text: #1a2433;
  --text-muted: #66788f;
  --accent: #005091;
  --accent-soft: rgba(0, 80, 145, 0.12);
  --accent-strong: #004478;
  --danger: #d64550;
  --warn: #c4841d;
  --font: 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --hw-accent: #005091;
  --hw-accent-strong: #004478;
  --hw-accent-soft: rgba(0, 80, 145, 0.12);
  --hw-border: #d5dee9;
  --hw-font: 'DM Sans', system-ui, sans-serif;
  --hw-mono: 'JetBrains Mono', ui-monospace, monospace;
  --hw-fs-base: 14px;
  --ctrl-h: 40px;
  --ctrl-radius: 8px;
  --ctrl-fw: 600;
  --ctrl-fs: 13px;
  --ctrl-pad-x: 12px;
  /* Thang spacing 4px — chrome / page / card dùng chung */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --header-pad-x: 16px;
  --toolbar-gap: 8px;
  --sidebar-pad: 12px;
  --page-pad: 24px;
  --card-pad: 16px;
  --card-radius: 12px;
  --frame-radius: 14px;
  --field-gap: 8px;
  /* Layout — header / content / frame (see styles/hw-layout.css) */
  --nav-h: 56px;
  --header-h: var(--nav-h);
  --chrome-pill-h: 40px;
  --content-offset-top: calc(var(--nav-h) + var(--safe-top, 0px));
  --hub-content-offset-top: 0px;
  --hub-autohide-offset-top: 12px;
  --shell-gap: 16px;
  --page-inset: 4px;
  --frame-margin-top: 12px;
  --frame-margin-x: 16px;
  --frame-margin-bottom: 16px;

  /* Icon palette — TopNav + MDI + inline SVG */
  --icon: #2f3b4c;
  --icon-muted: #66788f;
  --icon-active: #004478;
  --icon-soft: rgba(0, 80, 145, 0.14);
  --icon-danger: #d64550;
  --icon-warn: #c4841d;
  --icon-info: #355f9a;

  /* Type scale — dễ đọc, đồng bộ mọi app */
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  color-scheme: light;
}

/* Dark mode — cùng token, giá trị tối (toggle: data-hw-theme trên <html>) */
html[data-hw-theme="dark"] {
  color-scheme: dark;
  --bg: #0e131a;
  --bg-nav: #141a22;
  --bg-elevated: #1a222d;
  --bg-panel: #1a222d;
  --bg-hover: #243041;
  --surface: #1a222d;
  --border: #2a3545;
  --border-hover: #3a4658;
  --text: #e8eef5;
  --text-muted: #9aa8b8;
  --accent: #005091;
  --accent-soft: rgba(0, 80, 145, 0.2);
  --accent-strong: #399bdd;
  --danger: #f07178;
  --warn: #e0a54b;
  --hw-accent: #005091;
  --hw-accent-strong: #399bdd;
  --hw-accent-soft: rgba(0, 80, 145, 0.2);
  --hw-border: #2a3545;
  --icon: #c5d0de;
  --icon-muted: #9aa8b8;
  --icon-active: #399bdd;
  --icon-soft: rgba(0, 80, 145, 0.22);
  --icon-danger: #f07178;
  --icon-warn: #e0a54b;
  --icon-info: #7ba3d4;
}


/* Typography baseline — mọi app import @headway/material/styles */
html {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

body {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--text);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
}

code, kbd, pre, samp {
  font-family: var(--mono);
}

/* Icon sync — MDI / Vuetify / SVG chrome */
.v-icon,
.mdi,
.hw-icon {
  color: var(--icon);
  opacity: 1;
}

/* Trong nút: icon theo màu chữ nút (tránh trắng-on-trắng / tối-on-tối khi hover) */
.v-btn .v-icon,
.v-btn .mdi,
.v-btn .hw-icon {
  color: inherit;
}

.v-icon--size-small,
.mdi-18px {
  font-size: 18px !important;
}

.hw-icon--muted,
.v-icon.text-medium-emphasis {
  color: var(--icon-muted) !important;
}

.hw-icon--active,
.v-btn--active:not(.bg-primary):not(.bg-error):not(.bg-success):not(.bg-info):not(.bg-warning):not(.bg-secondary) .v-icon,
.v-list-item--active .v-icon,
.v-tab--selected .v-icon {
  color: var(--icon-active) !important;
}

.hw-icon--accent {
  color: var(--accent-strong) !important;
}

.hw-icon--danger {
  color: var(--icon-danger) !important;
}

/* Chữ phụ / caption chuẩn */
.hw-muted,
.text-medium-emphasis {
  color: var(--text-muted) !important;
}

.hw-label,
.hw-caption {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  letter-spacing: 0.01em;
}