:root {
  /* ── Surfaces (design-system.md) ── */
  --bg: #f5f5f5;
  --surface: #ffffff;
  --band: #fafafa;
  --sider: #0b1f38;
  --sider-hover: rgba(255, 255, 255, 0.08);
  --sider-active: #156cf4;

  /* ── Text ── */
  --text: rgba(0, 0, 0, 0.88);
  --text2: rgba(0, 0, 0, 0.65);
  --text3: rgba(0, 0, 0, 0.45);
  --text-disabled: rgba(0, 0, 0, 0.25);
  --text-inverse: #ffffff;

  /* ── Borders ── */
  --border: #d9d9d9;
  --border-soft: #f0f0f0;
  --border-button: rgba(15, 23, 42, 0.08);

  /* ── Accent (outline / nav chrome on marketing + some admin) ── */
  --accent: #6366f1;
  --accent-light: #eef2ff;
  --accent-hover: #4f46e5;
  --accent-dark: #4338ca;

  /* ── Primary actions ── */
  --blue: #156cf4;
  --blue-bg: #e6f4ff;
  --blue-hover: #408fff;
  --blue-dark: #084ecf;

  /* ── Semantic (status / charts) ── */
  --green: #52c41a;
  --green-bg: #f6ffed;
  --green-hover: #389e0d;
  --green-dark: #237804;

  --amber: #faad14;
  --amber-bg: #fffbe6;
  --amber-hover: #d48806;
  --amber-dark: #ad6800;

  --rose: #ff4d4f;
  --rose-bg: #fff2f0;
  --rose-hover: #d9363e;
  --rose-dark: #a8071a;

  --purple: #722ed1;
  --purple-bg: #f9f0ff;
  --purple-hover: #531dab;
  --purple-dark: #391085;

  /* Info / KPI accent (dashboard charts, badges) */
  --teal: #13c2c2;
  --teal-bg: #e6fffb;
  --teal-hover: #08979c;
  --teal-dark: #006d75;

  --navy: #0b1f38;

  /* ── Geometry & shadows ── */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-button: 14px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px rgba(0, 0, 0, 0.05);
}

/* Hide management-only navigation before the async role check finishes. */
html:not(.role-nav-ready) #navKpi,
html:not(.role-nav-ready) #navAi,
html:not(.role-nav-ready) #navSystem,
html.role-nav-admin #navKpi,
html.role-nav-admin #navAi,
html.role-nav-admin #navSystem,
html.role-nav-management #navSystem,
body:not(.role-nav-ready) #navKpi,
body:not(.role-nav-ready) #navAi,
body:not(.role-nav-ready) #navSystem,
body.role-nav-admin #navKpi,
body.role-nav-admin #navAi,
body.role-nav-admin #navSystem,
body.role-nav-management #navSystem {
  display: none !important;
}

html.role-nav-management .sidebar-item#navKpi,
html.role-nav-management .sidebar-item#navAi,
body.role-nav-management .sidebar-item#navKpi,
body.role-nav-management .sidebar-item#navAi {
  display: flex !important;
}

html.role-nav-management .nav-item#navKpi,
html.role-nav-management .nav-item#navAi,
body.role-nav-management .nav-item#navKpi,
body.role-nav-management .nav-item#navAi {
  display: inline-flex !important;
}

html.role-nav-developer .sidebar-item#navSystem,
body.role-nav-developer .sidebar-item#navSystem {
  display: flex !important;
}

html.role-nav-developer .sidebar-nav .sidebar-item:not(#navSystem),
body.role-nav-developer .sidebar-nav .sidebar-item:not(#navSystem) {
  display: none !important;
}

/* Thai-first stack; beats per-page `body { font-family: … }` (higher specificity). */
html body {
  font-family:
    "Noto Sans Thai",
    "IBM Plex Sans Thai",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Inter,
    Roboto,
    Arial,
    sans-serif;
}