/* ============================================
   SAHABAT GINJAL — Design System & Global Styles
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Primary — Medical Green */
  --color-primary: #1B7A3D;
  --color-primary-light: #2E9E54;
  --color-primary-lighter: #E8F5EC;
  --color-primary-dark: #145C2E;
  --color-primary-gradient: linear-gradient(135deg, #1B7A3D 0%, #2E9E54 100%);

  /* Accent Colors */
  --color-accent-red: #E53935;
  --color-accent-blue: #42A5F5;
  --color-accent-orange: #FF9800;
  --color-accent-purple: #7E57C2;
  --color-accent-teal: #26A69A;

  /* Neutrals */
  --color-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-border: #E5E7EB;
  --color-divider: #F0F0F0;

  /* Semantic */
  --color-success: #22C55E;
  --color-danger: #EF4444;
  --color-warning: #F59E0B;
  --color-info: #3B82F6;

  /* Category Badge Colors */
  --color-cat-edukasi: #1B7A3D;
  --color-cat-penyakit: #E53935;
  --color-cat-nutrisi: #FF9800;
  --color-cat-gaya: #42A5F5;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.16);
  --shadow-green: 0 4px 16px rgba(27, 122, 61, 0.25);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --navbar-height: 64px;
  --max-width: 430px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: #E8EDF2;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  outline: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea {
  font-family: var(--font-body);
  outline: none;
  border: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

a {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

ul, ol {
  list-style: none;
}

/* --- App Shell --- */
#app {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--color-bg);
  position: relative;
  overflow-x: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}

#page-container {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

/* --- Typography Utility Classes --- */
.heading-xl {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

.heading-l {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}

.heading-m {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.body-l {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.body-m {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.body-s {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }

/* --- Page Transition Animations --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fillUp {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-fade-in {
  animation: fadeIn var(--transition-base) ease forwards;
}

.anim-slide-in {
  animation: slideInRight 300ms ease forwards;
}

.anim-slide-up {
  animation: slideInUp 400ms ease forwards;
}

.anim-scale-in {
  animation: scaleIn 300ms ease forwards;
}

/* Stagger children animations */
.stagger-children > * {
  opacity: 0;
  animation: slideInUp 400ms ease forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 50ms; }
.stagger-children > *:nth-child(2) { animation-delay: 100ms; }
.stagger-children > *:nth-child(3) { animation-delay: 150ms; }
.stagger-children > *:nth-child(4) { animation-delay: 200ms; }
.stagger-children > *:nth-child(5) { animation-delay: 250ms; }
.stagger-children > *:nth-child(6) { animation-delay: 300ms; }
.stagger-children > *:nth-child(7) { animation-delay: 350ms; }
.stagger-children > *:nth-child(8) { animation-delay: 400ms; }

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* --- Selection Color --- */
::selection {
  background-color: var(--color-primary-lighter);
  color: var(--color-primary-dark);
}