/* src/assets/css/theme.css */
/* GOLD Savosa Official Brand Theme */
/* Global CSS variables, brand colors, and utility classes */

/* ========================================
   CSS VARIABLES - GOLD BRAND COLORS
   ======================================== */

:root {
  /* Official GOLD Theme Colors */
  --gold-blue: #2e3092;      /* Primary brand color */
  --gold-yellow: #ffdb00;    /* Secondary brand color */
  --gold-red: #ed1c24;       /* Red for unregister/cancel actions */

  /* Semantic colors */
  --color-primary: var(--gold-blue);
  --color-secondary: var(--gold-yellow);
  --color-background: #ffffff;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-border: #dddddd;
  --color-hover: #1a1c54;    /* Darker blue for hover */

  /* Old site legacy colors (for news view compatibility) */
  --news-header-bg: #ffcf63;     /* Yellow header from old site */
  --news-content-bg: #ffffb2;    /* Light yellow content from old site */
  --news-bg-light: #f8f9fa;      /* Light gray background */

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ========================================
   UTILITY CLASSES - BACKGROUNDS
   ======================================== */

.bg-gold {
  background-color: var(--gold-yellow) !important;
}

.bg-blue {
  background-color: var(--gold-blue) !important;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, var(--gold-blue) 0%, #3a3ea9 100%) !important;
}

/* ========================================
   UTILITY CLASSES - TEXT COLORS
   ======================================== */

.text-gold {
  color: var(--gold-yellow) !important;
}

.text-blue {
  color: var(--gold-blue) !important;
}

/* ========================================
   UTILITY CLASSES - BORDERS
   ======================================== */

.border-gold {
  border-color: var(--gold-yellow) !important;
}

.border-blue {
  border-color: var(--gold-blue) !important;
}

/* ========================================
   GLOBAL LINK STYLES
   ======================================== */

a {
  color: var(--gold-blue);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-hover);
}

/* ========================================
   BUTTON VARIANTS - GOLD THEME
   ======================================== */

.btn-gold {
  background: linear-gradient(135deg, var(--gold-blue) 0%, #3a3ea9 100%);
  color: white;
  border: none;
  font-weight: 500;
  transition: all var(--transition-normal);
  font-size: 0.9rem;
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--color-hover) 0%, var(--gold-blue) 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Solid gold-blue button (simpler variant) */
.btn-gold-blue {
  background-color: var(--gold-blue);
  border-color: var(--gold-blue);
  color: white;
  font-weight: 500;
  transition: all var(--transition-normal);
}

.btn-gold-blue:hover:not(:disabled) {
  background-color: #252775;
  border-color: #252775;
  color: white;
}

.btn-gold-blue:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-outline-gold {
  color: var(--gold-blue);
  border: 2px solid var(--gold-yellow);
  background: transparent;
  font-weight: 500;
  transition: all var(--transition-normal);
  font-size: 0.9rem;
}

.btn-outline-gold:hover {
  background-color: var(--gold-yellow);
  border-color: var(--gold-yellow);
  color: var(--gold-blue);
}

.btn-outline-blue {
  color: var(--gold-blue);
  border: 2px solid var(--gold-blue);
  background: transparent;
  font-weight: 500;
  transition: all var(--transition-normal);
  font-size: 0.9rem;
}

.btn-outline-blue:hover {
  background-color: var(--gold-blue);
  border-color: var(--gold-blue);
  color: white;
}

/* ========================================
   BADGE VARIANTS - GOLD THEME
   ======================================== */

.badge-gold {
  background-color: var(--gold-yellow);
  color: var(--gold-blue);
  font-weight: 600;
}

.badge-blue {
  background-color: var(--gold-blue);
  color: white;
  font-weight: 600;
}

/* ========================================
   GLOBAL RESETS & BASE STYLES
   ======================================== */

* {
  box-sizing: border-box;
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--gold-blue);
  font-weight: 700;
  line-height: 1.3;
}

/* ========================================
   SCROLLBAR STYLING (Chrome/Safari)
   ======================================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--gold-blue);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-hover);
}

/* ========================================
   SELECTION COLOR
   ======================================== */

::selection {
  background-color: var(--gold-yellow);
  color: var(--gold-blue);
}

::-moz-selection {
  background-color: var(--gold-yellow);
  color: var(--gold-blue);
}

/* ========================================
   FOCUS STYLES - ACCESSIBILITY
   ======================================== */

:focus-visible {
  outline: 2px solid var(--gold-yellow);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-yellow);
  outline-offset: 2px;
}

/* ========================================
   ADMIN TOGGLE - GOLD BLUE STYLING
   ======================================== */

.form-switch .form-check-input:checked {
  background-color: var(--gold-blue);
  border-color: var(--gold-blue);
}

.form-switch .form-check-input:focus {
  border-color: var(--gold-blue);
  box-shadow: 0 0 0 0.25rem rgba(46, 48, 146, 0.25);
}