/*=============================================================
  Color Palette
=============================================================*/

:root {
  /* Core palette */
  --color-primary:   #0D1321;
  --color-dark:      #1D2D44;
  --color-secondary: #3E5C76;
  --color-muted:     #748CAB;
  --color-accent:    #F0EBD8;

  /* Utility extras */
  --color-bg:        #F0F0F0;
  --color-white:     #FFFFFF;
}

/*=============================================================
  Global Styles
=============================================================*/

/* Page background */
body {
  background-color: var(--color-bg);
}

/* Ensure topbar is always pure white */
.topbar {
  background-color: var(--color-white) !important;
}

/*=============================================================
  Background Utilities
=============================================================*/

.bg-primary    { background-color: var(--color-primary)   !important; }
.bg-dark       { background-color: var(--color-dark)      !important; }
.bg-secondary  { background-color: var(--color-secondary) !important; }
.bg-muted      { background-color: var(--color-muted)     !important; }
.bg-accent     { background-color: var(--color-accent)    !important; }
.bg-white      { background-color: var(--color-white)     !important; }
.bg-bg         { background-color: var(--color-bg)        !important; }

/*=============================================================
  Text Color Utilities
=============================================================*/

.text-primary    { color: var(--color-primary)   !important; }
.text-dark       { color: var(--color-dark)      !important; }
.text-secondary  { color: var(--color-secondary) !important; }
.text-muted      { color: var(--color-muted)     !important; }
.text-accent     { color: var(--color-accent)    !important; }
.text-white      { color: var(--color-white)     !important; }

/*=============================================================
  Border & Shadow Utilities
=============================================================*/

.border-primary    { border-color: var(--color-primary)   !important; }
.border-dark       { border-color: var(--color-dark)      !important; }
.border-secondary  { border-color: var(--color-secondary) !important; }
.border-muted      { border-color: var(--color-muted)     !important; }
.border-accent     { border-color: var(--color-accent)    !important; }

.shadow-primary   { box-shadow: 0 4px 6px -1px rgba(13,19,33,0.1), 0 2px 4px -1px rgba(13,19,33,0.06); }
.shadow-dark      { box-shadow: 0 4px 6px -1px rgba(29,45,68,0.1), 0 2px 4px -1px rgba(29,45,68,0.06); }

/*=============================================================
  Hover States
=============================================================*/

.hover\:bg-primary:hover    { background-color: var(--color-primary)   !important; }
.hover\:bg-secondary:hover  { background-color: var(--color-secondary) !important; }
.hover\:bg-muted:hover      { background-color: var(--color-muted)     !important; }
.hover\:bg-accent:hover     { background-color: var(--color-accent)    !important; }

.hover\:text-primary:hover   { color: var(--color-primary)   !important; }
.hover\:text-secondary:hover { color: var(--color-secondary) !important; }
.hover\:text-muted:hover     { color: var(--color-muted)     !important; }
.hover\:text-accent:hover    { color: var(--color-accent)    !important; }

/*=============================================================
  Utility Helpers
=============================================================*/

/* For semi-transparent backgrounds */
.bg-opacity-10 { background-color: rgba(255,255,255,0.1) !important; }
.bg-opacity-20 { background-color: rgba(255,255,255,0.2) !important; }

/* Rounded & spacing (optional extras) */
.rounded-xl  { border-radius: 1rem !important; }
.rounded-2xl { border-radius: 1.5rem !important; }
.p-5        { padding: 1.25rem !important; }
.p-6        { padding: 1.5rem !important; }
.mb-8       { margin-bottom: 2rem !important; }