:root {
  --color-primary: #031165; 
  --color-secondary: #eb7437;
  --color-accent: #10b981;      /* Green-500 */
  --color-background: #f9fafb;  /* Gray-50 */
  --color-surface: #ffffff;     /* White */
  --color-text: #111827;        /* Gray-900 */
  --color-muted: #6b7280;       /* Gray-500 */
  --color-border: #e5e7eb;      /* Gray-200 */
}

/* header */
nav ul li a {
    color:var(--color-primary);
}
nav ul li a.mk {
    color:var(--color-secondary);
}
.text-brand-primary{
  color: var(--color-primary);
}

.text-brand-secondary{
  color: var(--color-secondary);
}

.bg-brand-primary{
  background: var(--color-primary);
}

.bg-brand-secondary{
  background: var(--color-secondary);
}

.border-brand-primary{
  color: 1px solid var(--color-primary);
}

.border-brand-secondary{
  color: 1px solid var(--color-secondary);
}
/* end header */


/* Header scroll css */
/* Default header */
#main-header {
  background: transparent;
  padding: 24px 20px;
  box-shadow: none;
}

/* Scrolled header */
#main-header.scrolled {
  background: white;
  padding: 8px 20px; /* reduce padding */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Sign in/out colors */
#main-header.scrolled #signin-btn,
#main-header.scrolled #signup-btn {
  color: black; /* Sign In text black */
}

#main-header.scrolled #signup-btn {
  background: #10B981; /* example: brand secondary green */
}

/* End header scroll css */