:root {
  --brand-primary: #C9A039;
  --brand-secondary: #0C2043;
  --brand-accent: #D4AF37;
  --brand-neutral-100: #FFFFFF;
  --brand-neutral-900: #0A162B;
  --brand-font: 'Poppins', sans-serif;
}

[data-theme="light"] {
  --color-background: #FFFFFF;
  --color-surface: #F7F7F9;
  --color-card: #FFFFFF;
  --color-border: #E2E4E8;
  --color-text-primary: #0C2043;
  --color-text-secondary: #4B5563;
  --color-button-primary-bg: #C9A039;
  --color-button-primary-text: #ffffff;
  --color-button-secondary-bg: #0C2043;
  --color-button-secondary-text: #ffffff;
}

[data-theme="dark"] {
  --color-background: #0A162B;
  --color-surface: #0C2043;
  --color-card: #0C2043;
  --color-border: #1F2D46;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #C9A039;
  --color-button-primary-bg: #C9A039;
  --color-button-primary-text: #ffffff;
  --color-button-secondary-bg: #0C2043;
  --color-button-secondary-text: #ffffff;
}


/* Theme Utility Classes */

/* Background Colors - Brand */
.bg-brand-primary { background-color: var(--brand-primary); }
.bg-brand-secondary { background-color: var(--brand-secondary); }
.bg-brand-accent { background-color: var(--brand-accent); }
.bg-brand-neutral-100 { background-color: var(--brand-neutral-100); }
.bg-brand-neutral-900 { background-color: var(--brand-neutral-900); }

/* Background Colors - Semantic */
.bg-background { background-color: var(--color-background); }
.bg-surface { background-color: var(--color-surface); }
.bg-card { background-color: var(--color-card); }

/* Text Colors - Brand */
.text-brand-primary { color: var(--brand-primary); }
.text-brand-secondary { color: var(--brand-secondary); }
.text-brand-accent { color: var(--brand-accent); }
.text-brand-neutral-100 { color: var(--brand-neutral-100); }
.text-brand-neutral-900 { color: var(--brand-neutral-900); }

/* Text Colors - Semantic */
.text-content-primary { color: var(--color-text-primary); }
.text-content-secondary { color: var(--color-text-secondary); }

/* Border Colors - Brand */
.border-brand-primary { border-color: var(--brand-primary); }
.border-brand-secondary { border-color: var(--brand-secondary); }
.border-brand-accent { border-color: var(--brand-accent); }

/* Border Colors - Semantic */
.border-border { border-color: var(--color-border); }

/* Ring Colors - Brand */
.ring-brand-primary { --tw-ring-color: var(--brand-primary); }
.ring-brand-secondary { --tw-ring-color: var(--brand-secondary); }
.ring-brand-accent { --tw-ring-color: var(--brand-accent); }

/* Focus Ring Colors */
.focus\:ring-brand-primary:focus { --tw-ring-color: var(--brand-primary); }
.focus\:ring-brand-secondary:focus { --tw-ring-color: var(--brand-secondary); }
.focus\:ring-brand-accent:focus { --tw-ring-color: var(--brand-accent); }

/* Focus Border Colors */
.focus\:border-brand-primary:focus { border-color: var(--brand-primary); }
.focus\:border-brand-secondary:focus { border-color: var(--brand-secondary); }
.focus\:border-brand-accent:focus { border-color: var(--brand-accent); }

/* Hover Background Colors */
.hover\:bg-brand-primary:hover { background-color: var(--brand-primary); }
.hover\:bg-brand-secondary:hover { background-color: var(--brand-secondary); }
.hover\:bg-brand-accent:hover { background-color: var(--brand-accent); }
.hover\:bg-surface:hover { background-color: var(--color-surface); }
.hover\:bg-card:hover { background-color: var(--color-card); }

/* Hover Text Colors */
.hover\:text-brand-primary:hover { color: var(--brand-primary); }
.hover\:text-brand-secondary:hover { color: var(--brand-secondary); }
.hover\:text-brand-accent:hover { color: var(--brand-accent); }
.hover\:text-white:hover { color: #ffffff; }

/* Hover Border Colors */
.hover\:border-brand-primary:hover { border-color: var(--brand-primary); }
.hover\:border-brand-secondary:hover { border-color: var(--brand-secondary); }
.hover\:border-brand-accent:hover { border-color: var(--brand-accent); }

/* Opacity Utilities */
.bg-brand-primary\/10 { background-color: rgb(from var(--brand-primary) r g b / 0.1); }
.bg-brand-primary\/20 { background-color: rgb(from var(--brand-primary) r g b / 0.2); }
.bg-brand-secondary\/10 { background-color: rgb(from var(--brand-secondary) r g b / 0.1); }
.bg-brand-secondary\/20 { background-color: rgb(from var(--brand-secondary) r g b / 0.2); }
.bg-brand-accent\/10 { background-color: rgb(from var(--brand-accent) r g b / 0.1); }
.bg-brand-accent\/20 { background-color: rgb(from var(--brand-accent) r g b / 0.2); }

/* Gradient Utilities */
.from-brand-primary { --tw-gradient-from: var(--brand-primary); }
.from-brand-secondary { --tw-gradient-from: var(--brand-secondary); }
.from-brand-accent { --tw-gradient-from: var(--brand-accent); }
.to-brand-primary { --tw-gradient-to: var(--brand-primary); }
.to-brand-secondary { --tw-gradient-to: var(--brand-secondary); }
.to-brand-accent { --tw-gradient-to: var(--brand-accent); }

/* Shadow Utilities */
.shadow-brand-primary { --tw-shadow-color: var(--brand-primary); }
.shadow-brand-secondary { --tw-shadow-color: var(--brand-secondary); }
.shadow-brand-accent { --tw-shadow-color: var(--brand-accent); }

/* Divide Colors */
.divide-border { border-color: var(--color-border); }

/* Placeholder Colors */
.placeholder\:text-content-secondary::placeholder { color: var(--color-text-secondary); }

/* Disabled States */
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Theme Font */
.font-theme { font-family: var(--brand-font); }

/* Theme Transitions */
.theme-transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Button Variants */
.btn-primary {
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
}
.btn-secondary {
  background-color: var(--color-button-secondary-bg);
  color: var(--color-button-secondary-text);
}

/* Active States */
.active\:bg-brand-primary:active { background-color: var(--brand-primary); }
.active\:bg-brand-secondary:active { background-color: var(--brand-secondary); }
.active\:text-white:active { color: #ffffff; }