:root {
  --citra-navy: #07115c;
  --citra-navy-dark: #030735;
  --citra-red: #e30613;
  --citra-red-dark: #b8000b;
  --citra-red-soft: rgba(227, 6, 19, .12);
  --citra-glow: rgba(227, 6, 19, .22);
}

::selection { background: var(--citra-red); color: #fff; }

/* Rebrand Tailwind violet accent utilities to Citra red without requiring a new Vite build. */
.text-violet-400, .text-violet-500, .text-violet-600, .text-violet-700 { color: var(--citra-red) !important; }
.bg-violet-50 { background-color: #fff1f2 !important; }
.bg-violet-100 { background-color: #ffe4e6 !important; }
.bg-violet-500, .bg-violet-600, .bg-violet-700 { background-color: var(--citra-red) !important; }
.border-violet-100, .border-violet-200, .border-violet-300 { border-color: rgba(227, 6, 19, .28) !important; }
.ring-violet-100 { --tw-ring-color: rgba(227, 6, 19, .16) !important; }
.ring-violet-500\/20 { --tw-ring-color: rgba(227, 6, 19, .20) !important; }
.focus\:border-violet-500:focus { border-color: var(--citra-red) !important; }
.focus\:ring-violet-100:focus { --tw-ring-color: rgba(227, 6, 19, .16) !important; }
.focus\:ring-violet-500\/20:focus { --tw-ring-color: rgba(227, 6, 19, .20) !important; }
.hover\:bg-violet-700:hover { background-color: var(--citra-red-dark) !important; }
.hover\:border-violet-300:hover { border-color: rgba(227, 6, 19, .42) !important; }
.hover\:text-violet-700:hover { color: var(--citra-red-dark) !important; }
.shadow-violet-300\/50 { --tw-shadow-color: rgba(227, 6, 19, .35) !important; --tw-shadow: var(--tw-shadow-colored) !important; }

/* General Citra Edukasi polish. */
body { background-image: radial-gradient(circle at top right, rgba(227, 6, 19, .035), transparent 34%); }
.soft-card, .metric-card, .dashboard-chart-card, .compact-card {
  border-color: rgba(7, 17, 92, .08) !important;
}
.metric-card-link::after {
  background: linear-gradient(135deg, rgba(227, 6, 19, .09), transparent 42%) !important;
}

.app-footer {
  border-color: rgba(7, 17, 92, .10) !important;
}

html[data-theme="dark"] .text-violet-400,
html[data-theme="dark"] .text-violet-500,
html[data-theme="dark"] .text-violet-600,
html[data-theme="dark"] .text-violet-700 { color: #ff4d57 !important; }
html[data-theme="dark"] .metric-icon { color: #ff6b74 !important; }
html[data-theme="dark"] .soft-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .dashboard-chart-card,
html[data-theme="dark"] .compact-card {
  border-color: rgba(255,255,255,.10) !important;
}