/* Custom styles aplikasi — design tokens Lumi (lihat branding.md §1) */
:root {
  /* ---------- Brand ---------- */
  --primary:            #AD0000;
  --primary-dark:       #8A0000;
  --primary-darker:     #660000;
  --primary-container:  #FFE9EB;
  --primary-lighter:    #FFF5F5;
  --on-primary-container: #8A0000;

  --accent-coral: #FF6B6B;
  --accent-rose:  #FFB4B4;

  /* ---------- Neutral ---------- */
  --neutral-50:  #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* ---------- Surface hangat ---------- */
  --surface:              #FFF8F7;
  --surface-container-low:#FDF1F0;
  --surface-container:    #F8EBEA;
  --on-surface:           #231919;
  --on-surface-variant:   #534343;
  --outline-variant:      #D8C2C1;

  /* ---------- Status ---------- */
  --success: #10B981;  --success-container: #D1FAE5;  --on-success-container: #065F46;
  --warning: #F59E0B;  --warning-container: #FEF3C7;  --on-warning-container: #92400E;
  --info:    #3B82F6;  --info-container:    #DBEAFE;  --on-info-container:    #1E40AF;
  --danger:  #EF4444;  --danger-container:  #FFF1F2;  --on-danger-container:  #9F1239;
  --danger-border: #FECDD3;

  /* ---------- Typography ---------- */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---------- Radius ---------- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;     --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-24: 6rem;

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-card-hover: 0 20px 40px -16px rgba(23,23,23,.18);
  --shadow-dialog:     0 30px 80px rgba(0,0,0,.28);

  --shadow-glass:        0 4px 14px -6px rgba(23,17,17,.12), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-glass-hover:  0 8px 20px -8px rgba(173,0,0,.28), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-primary:      0 10px 26px rgba(173,0,0,.30), inset 0 1px 0 rgba(255,255,255,.25);
  --shadow-primary-hover:0 14px 32px rgba(173,0,0,.38), inset 0 1px 0 rgba(255,255,255,.30);

  /* ---------- Glass ---------- */
  --glass-bg:     rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.6);
  --glass-blur:   blur(20px) saturate(180%);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-entrance: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: .2s;
  --duration-base: .3s;
  --transition:    all .3s var(--ease-standard);

  /* ---------- Semantic surface (dipetakan ulang di dark mode, §8) ---------- */
  --bg:         var(--neutral-50);
  --surface-1:  #FFFFFF;
  --surface-2:  var(--neutral-100);
  --border:     var(--neutral-200);
  --text:       var(--neutral-900);
  --text-muted: var(--neutral-500);
}

:root[data-theme="dark"] {
  --bg:          #121212;
  --surface-1:   #1E1E1E;
  --surface-2:   #262626;
  --border:      #333333;
  --text:        #F1F1F1;
  --text-muted:  #ABABAB;

  --glass-bg:     rgba(30,30,30,.72);
  --glass-border: rgba(255,255,255,.09);

  --primary-container:    rgba(173,0,0,.24);
  --on-primary-container: #FFB4B4;
  --danger-container:     rgba(239,68,68,.15);
  --on-danger-container:  #FDA4AF;
  --danger-border:        rgba(239,68,68,.35);
  --success-container:    rgba(16,185,129,.15);
  --on-success-container: #6EE7B7;
  --info-container:       rgba(59,130,246,.15);
  --on-info-container:    #93C5FD;
  --warning-container:    rgba(245,158,11,.15);
  --on-warning-container: #FCD34D;
  --primary-lighter:      rgba(173,0,0,.12);
}

/* ---------- Reset dasar (§11) ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; }

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