/* === FILE: css/themes.css === */
/* CSS custom properties untuk tema terang dan gelap */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
  --transition: 200ms ease;
  --sidebar-width: 240px;
  --sidebar-collapsed: 60px;
  --header-height: 60px;
}

[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F7FA;
  --bg-tertiary: #E8ECF1;
  --text-primary: #1A1A2E;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;
  --accent-primary: #1658A2;
  --accent-hover: #0D4A8A;
  --accent-light: #E8F0FE;
  --border: #E2E8F0;
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #3B82F6;
  --backdrop: rgba(0,0,0,0.4);
}

[data-theme="dark"] {
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --accent-primary: #60A5FA;
  --accent-hover: #93C5FD;
  --accent-light: #1E3A5F;
  --border: #334155;
  --success: #4ADE80;
  --warning: #FBBF24;
  --error: #F87171;
  --info: #60A5FA;
  --backdrop: rgba(0,0,0,0.6);
}

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

html {
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection {
  background: var(--accent-primary);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

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

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-hint { color: var(--text-tertiary); font-size: 12px; margin-top: 4px; }
.text-error { color: var(--error); font-size: 12px; margin-top: 4px; }
.text-success { color: var(--success); }
.text-center { text-align: center; }
.hidden { display: none !important; }