/* ═══════════════════════════════════════════════
   NOTED PAD PRO v4 — variables.css
   Design tokens — semua nilai visual terpusat di sini
═══════════════════════════════════════════════ */
:root {
  /* ── Background Layers ── */
  --bg-deep:    #0d0f14;
  --bg-card:    #141720;
  --bg-sidebar: #0f1117;
  --bg-hover:   #1c2030;
  --bg-active:  #1e2540;
  --bg-input:   #0a0c11;

  /* ── Accent & Brand ── */
  --accent:        #f0a500;
  --accent-soft:   rgba(240,165,0,.12);
  --accent-glow:   rgba(240,165,0,.28);
  --border-accent: rgba(240,165,0,.25);

  /* ── Typography ── */
  --text-primary:   #e8eaf0;
  --text-secondary: #8892a4;
  --text-muted:     #4a5568;
  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* ── Borders ── */
  --border:      rgba(255,255,255,.06);
  --border-light: rgba(255,255,255,.10);

  /* ── Status Colors ── */
  --danger:  #e05555;
  --success: #48bb78;
  --info:    #4a9eff;
  --warning: #f0a500;
  --purple:  #a78bfa;
  --teal:    #2dd4bf;

  /* ── Semantic Colors (status rgba) ── */
  --danger-soft:  rgba(224,85,85,.14);
  --success-soft: rgba(72,187,120,.14);
  --info-soft:    rgba(74,158,255,.14);
  --warning-soft: rgba(240,165,0,.12);
  --purple-soft:  rgba(167,139,250,.14);
  --teal-soft:    rgba(45,212,191,.14);

  /* ── Layout ── */
  --sidebar-w: 288px;
  --rp-w:      252px;
  --topbar-h:  52px;
  --statusbar-h: 26px;

  /* ── Shape ── */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* ── Shadow ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.55);

  /* ── Z-index Scale ── */
  --z-sidebar:  50;
  --z-topbar:   200;
  --z-dropdown: 1000;
  --z-modal:    1100;
  --z-toast:    1200;
  --z-notify:   1300;
  --z-focus:    1400;

  /* ── Transitions ── */
  --t-fast:   .12s ease;
  --t-normal: .2s ease;
  --t-slow:   .35s ease;
}