/* BA Handbook design tokens. Dipakai portal.css, auth.css, admin.css. */
:root {
  color-scheme: light;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --paper: #FBFAF7;
  --surface: #FFFFFF;
  --surface-sunken: #F3F1EC;
  --surface-hover: #EFECE6;
  --ink: #1B2230;
  --ink-2: #454D5C;
  --ink-3: #69707D;
  --line: #E3E0D8;
  --line-strong: #CBC6BB;

  --accent: #1349C4;
  --accent-hover: #0F3A9C;
  --accent-soft: #E7EEFB;
  --accent-ink: #0F3A9C;
  --on-accent: #FFFFFF;

  --danger: #C62A22;
  --danger-soft: #FBE9E7;
  --danger-ink: #8F1D17;
  --on-danger: #FFFFFF;
  --warning: #B45309;
  --warning-soft: #FDF1DE;
  --warning-ink: #7A3A06;
  --success: #138A36;
  --success-soft: #E5F3E9;
  --success-ink: #0D5C25;
  --neutral-soft: #EEECE7;
  --neutral-ink: #454D5C;

  --brand-blue: #1349C4;
  --brand-green: #138A36;
  --brand-red: #D7261E;

  --logo-plate: transparent;
  --img-plate: transparent;
  --img-pad: 0px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-pop: 0 10px 30px rgb(20 24 32 / 0.14), 0 2px 6px rgb(20 24 32 / 0.08);
  --focus-ring: 0 0 0 3px rgb(19 73 196 / 0.35);

  --sidebar-w: 272px;
  --toc-w: 220px;
  --content-max: 760px;
  --topbar-h: 56px;
  --gutter: 16px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --leading: 1.65;

  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14171C;
  --surface: #1B1F26;
  --surface-sunken: #101317;
  --surface-hover: #242934;
  --ink: #E6E8EC;
  --ink-2: #B9BFCA;
  --ink-3: #8F96A3;
  --line: #2A303A;
  --line-strong: #3B4351;

  --accent: #7FA3F0;
  --accent-hover: #A3BEF5;
  --accent-soft: #1A2744;
  --accent-ink: #A9C2F6;
  --on-accent: #0B1430;

  --danger: #F08A80;
  --danger-soft: #3A1C1A;
  --danger-ink: #F8B4AD;
  --on-danger: #2A0E0C;
  --warning: #F0B45E;
  --warning-soft: #3A2A12;
  --warning-ink: #F6CF95;
  --success: #6FCF8E;
  --success-soft: #14301E;
  --success-ink: #A6E3B8;
  --neutral-soft: #262B34;
  --neutral-ink: #C3C8D1;

  --logo-plate: #F4F2EC;
  --img-plate: #F4F2EC;
  --img-pad: 12px;

  --shadow-pop: 0 10px 30px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.3);
  --focus-ring: 0 0 0 3px rgb(127 163 240 / 0.45);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%; background: var(--logo-plate);
}
.brand-mark img { width: 30px; height: 30px; object-fit: contain; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink);
  font: 500 var(--text-sm)/1 var(--font-sans);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-hover); color: var(--ink); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-danger:hover { background: var(--danger-ink); border-color: var(--danger-ink); color: var(--on-danger); }
.btn-sm { min-height: 36px; padding: 0 12px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
@media (pointer: coarse) { .btn, .btn-sm { min-height: 44px; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }

.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
:root[data-theme="dark"] .theme-icon-light { display: none; }

.badge {
  display: inline-flex; align-items: center;
  padding: 1px 8px; border-radius: var(--radius-sm);
  font: 500 var(--text-xs)/1.6 var(--font-sans);
  background: var(--neutral-soft); color: var(--neutral-ink);
}
.badge-critical { background: var(--danger-soft); color: var(--danger-ink); }
.badge-high { background: var(--warning-soft); color: var(--warning-ink); }
.badge-medium { background: var(--accent-soft); color: var(--accent-ink); }
.badge-low { background: var(--success-soft); color: var(--success-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}