/* ============================================================
   OMG PROJECT — Design Tokens
   Palette: Hitam / Putih + Merah #AB0505
   Style  : Formal / Corporate
   ============================================================ */

:root {
  /* ============================================
     BASE COLORS — DARK (default)
     ============================================ */
  --bg:        #0d0d0d;                       /* background utama */
  --bg-2:      #161616;                       /* surface / card */
  --bg-3:      #1e1e1e;                       /* elevated surface */
  --card:      #181818;                       /* card background */
  --input-bg:  #1f1f1f;                       /* form input background */
  --text:      #f5f5f5;                       /* teks utama */
  --text-2:    #b0b0b0;                       /* teks sekunder */
  --muted:     #888888;                       /* teks muted */
  --border:    rgba(255, 255, 255, 0.08);     /* border halus */
  --border-2:  rgba(255, 255, 255, 0.14);     /* border tegas */

  /* ============================================
     ACCENT — MERAH FORMAL
     ============================================ */
  --accent:       #AB0505;                    /* merah utama */
  --accent-2:     #8A0404;                    /* merah gelap (hover) */
  --accent-3:     #D40A0A;                    /* merah terang (highlight) */
  --accent-soft:  rgba(171, 5, 5, 0.12);      /* merah transparan */
  --accent-grad:  linear-gradient(135deg, #AB0505, #8A0404);

  /* ============================================
     STATUS COLORS
     ============================================ */
  --success:  #16a34a;
  --warning:  #d97706;
  --danger:   #AB0505;
  --info:     #2563eb;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-display: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ============================================
     SPACING
     ============================================ */
  --space-xs:  0.5rem;    /* 8px  */
  --space-sm:  0.75rem;   /* 12px */
  --space:     1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  3rem;      /* 48px */
  --space-2xl: 4rem;      /* 64px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   14px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ============================================
     TRANSITIONS
     ============================================ */
  --t-fast: 0.15s ease;
  --t:      0.22s ease;
  --t-slow: 0.35s ease;

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:    0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ============================================
     LAYOUT
     ============================================ */
  --container:           1200px;
  --sidebar-w:           260px;
  --sidebar-w-collapsed: 76px;
  --nav-h:               70px;

  /* ============================================
     BOOTSTRAP OVERRIDES
     ============================================ */
  --bs-body-bg:         #0d0d0d;
  --bs-body-color:      #f5f5f5;
  --bs-primary:         #AB0505;
  --bs-border-color:    rgba(255, 255, 255, 0.08);
  --bs-font-sans-serif: var(--font-body);
}