/*
 * SEUMANGAT — design tokens
 *
 * Palet diturunkan dari logo Kemenkes. Warna asli logo tidak memenuhi
 * WCAG AA untuk teks (teal #00A99D 2,6:1; cyan #17BECF 2,2:1;
 * lime #C8D92E 1,5:1 terhadap putih), sehingga versi fungsional
 * digelapkan. Lime tidak pernah dipakai untuk teks.
 */

:root {
  --sm-teal-800: #00564f;
  --sm-teal-700: #00796b;
  --sm-teal-600: #009184;
  --sm-teal-500: #00a99d;
  --sm-teal-100: #a8ded7;
  --sm-teal-50: #e3f5f3;

  --sm-cyan-600: #0e93a3;
  --sm-cyan-500: #17becf;

  --sm-lime-900: #3d4400;
  --sm-lime-700: #5c6600;
  --sm-lime-500: #c8d92e;
  --sm-lime-50: #f5f9dd;

  --sm-risk-low: #00796b;
  --sm-risk-mid: #b45309;
  --sm-risk-high: #b91c1c;

  --sm-ink: #14201e;
  --sm-ink-muted: #5a6b68;
  --sm-ink-faint: #8a9997;
  --sm-line: #dfe7e5;
  --sm-line-strong: #c3d1ce;
  --sm-surface: #ffffff;
  --sm-surface-alt: #f6faf9;

  --sm-danger: #b91c1c;
  --sm-danger-bg: #fdecec;
  --sm-warning: #b45309;
  --sm-warning-bg: #fdf3e4;
  --sm-success: #00796b;
  --sm-success-bg: #e3f5f3;

  --sm-radius: 8px;
  --sm-radius-lg: 12px;
  --sm-radius-pill: 999px;

  --sm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sm-font-size-app: 17px;
  --sm-font-size-panel: 15px;
  --sm-leading: 1.7;

  --sm-tap: 48px;
  --sm-measure: 65ch;

  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 24px;
  --sm-space-6: 32px;

  --sm-glass-bg: rgba(255, 255, 255, 0.72);
  --sm-glass-border: rgba(255, 255, 255, 0.9);
  --sm-glass-blur: 16px;
  --sm-page-bg: linear-gradient(140deg, #eff9f8 0%, #f4fbec 55%, #eaf6f9 100%);
}

/* Perangkat tanpa dukungan backdrop-filter mendapat permukaan solid.
   Transparan tanpa blur justru merusak kontras. */
@supports not (backdrop-filter: blur(1px)) {
  :root {
    --sm-glass-bg: #ffffff;
    --sm-glass-blur: 0px;
  }
}

/* Hormati setelan aksesibilitas sistem. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --sm-glass-bg: #ffffff;
    --sm-glass-blur: 0px;
  }
}

/* Perangkat berspesifikasi rendah ditandai oleh app.js. */
html.sm-lowend {
  --sm-glass-bg: #ffffff;
  --sm-glass-blur: 0px;
}

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

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

body.sm-body {
  margin: 0;
  font-family: var(--sm-font);
  color: var(--sm-ink);
  background: var(--sm-surface-alt);
  line-height: var(--sm-leading);
}

.sm-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a {
  color: var(--sm-teal-700);
}

.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-2);
  min-height: var(--sm-tap);
  padding: 0 var(--sm-space-4);
  border: 0;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-teal-700);
  color: #ffffff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.sm-btn:hover {
  background: var(--sm-teal-800);
}

.sm-btn--ghost {
  background: transparent;
  color: var(--sm-teal-700);
  border: 1px solid var(--sm-line-strong);
}

.sm-btn--ghost:hover {
  background: var(--sm-teal-50);
}

.sm-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--sm-radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.sm-badge--draft {
  background: var(--sm-warning-bg);
  color: var(--sm-warning);
}

.sm-badge--submitted {
  background: var(--sm-teal-50);
  color: var(--sm-teal-800);
}

.sm-badge--validated {
  background: var(--sm-lime-50);
  color: var(--sm-lime-900);
}

.sm-badge--published {
  background: var(--sm-success-bg);
  color: var(--sm-success);
}

.sm-badge--locked {
  background: var(--sm-danger-bg);
  color: var(--sm-danger);
}