/* ==========================================================================
   PRESENSI SURYA MADINA — DESIGN SYSTEM
   Token warna diambil dari aset logo resmi (navy #010080 · orange #FF7E00).
   Signature UI: "Cincin Kehadiran" — tombol presensi berbentuk shutter kamera
   dengan arc progres jam kerja, terinspirasi lengkung gapura & aperture lensa.
   ========================================================================== */

:root {
  /* --- Warna Brand --- */
  --navy-900: #010080;
  --navy-800: #0A0F6B;
  --navy-700: #171C7A;
  --navy-100: #E6E7F7;
  --navy-50:  #F3F3FC;

  --orange-700: #A34400;
  --orange-600: #C25400;
  --orange-500: #FF7E00;
  --orange-400: #FF9A33;
  --orange-100: #FFE7CC;
  --orange-50:  #FFF4E8;

  /* --- Warna Status --- */
  --success-600: #0F6B3D;
  --success-500: #1E9E6B;
  --success-100: #DFF5EA;
  --warning-600: #8A5600;
  --warning-500: #F5A524;
  --warning-100: #FFF1D6;
  --danger-600:  #C22B31;
  --danger-500:  #E5484D;
  --danger-100:  #FBE1E2;

  /* --- Netral --- */
  --ink-900: #1B1D29;
  --ink-700: #40424F;
  --ink-500: #6B6D7A;
  --ink-300: #A5A7B4;
  --ink-100: #E4E4EC;
  --paper:   #FFFFFF;
  --canvas:  #F5F6FB;
  --cream:   #FBF8F3;

  /* --- Tipografi --- */
  --font-display: 'Lexend', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Radius & Bayangan --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 29, 41, 0.06), 0 1px 1px rgba(27, 29, 41, 0.04);
  --shadow-md: 0 8px 24px rgba(1, 0, 128, 0.08), 0 2px 6px rgba(1, 0, 128, 0.05);
  --shadow-lg: 0 16px 40px rgba(1, 0, 128, 0.14);

  --gap-page: 18px;
  --nav-height: 68px;
  --topbar-height: 64px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2.5px solid var(--orange-500);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Scrollbar halus (opsional, WebKit) --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-100); border-radius: var(--r-full); }