/**
 * CasteoHub Design System
 * SINGLE SOURCE OF TRUTH for all design tokens and base styles
 *
 * Structure:
 * 1. :root { ... }              CSS custom properties (variables) — colors, typography, spacing, shadows
 * 2. Base elements (h1-body)    Default styles using variables
 * 3. Component classes (.btn, .card, .badge-*)  Base component styles using variables
 *
 * Philosophy:
 * - All design decisions live in :root variables
 * - Base CSS classes reference variables, NOT hardcoded values
 * - Other CSS files (styles.css, admin.css, etc.) ONLY contain overrides & customizations
 * - One change to a variable = global update across entire app
 *
 * Example: Change favorite registered icon color
 * BEFORE (scattered): Search all files for #ab30ab, change 3+ places
 * NOW: Change --color-fav-registered: #ab30ab in :root → done!
 */

:root {
  /* ============================================
     COLOR PALETTE — Gray-Blue Theme
     ============================================ */

  /* Primary colors */
  --color-primary: #3498db;
  /* Bright blue for main actions */
  --color-primary-dark: #2980b9;
  /* Darker blue for hover states */
  --color-primary-light: #ebf5fb;
  /* Light blue for backgrounds */

  /* Secondary colors */
  --color-secondary: #5a6c7d;
  /* Slate gray for secondary content */
  --color-secondary-dark: #34495e;
  /* Dark slate for text */
  --color-secondary-light: #bdc3c7;
  /* Light gray for borders/separators */

  /* Status colors (used for buttons, badges, alerts) */
  --color-success: #27ae60;
  /* Green for positive actions, success badges, buttons */
  --color-success-dark: #1e7e34;
  /* Darker green for hover states */

  --color-danger: #e74c3c;
  /* Red for destructive actions, danger badges, buttons */
  --color-danger-dark: #d32f2f;
  /* Darker red for hover states */

  --color-warning: #f39c12;
  /* Orange for warnings, warning badges, buttons */
  --color-warning-dark: #e68900;
  /* Darker orange for hover states */

  --color-info: #3498db;
  /* Blue for informational messages, info badges, buttons */
  --color-info-dark: #2980b9;
  /* Darker blue for hover states */

  /* Background & Text colors */
  --color-light: #f8fafc;
  /* Off-white background */
  --color-off-white: #fdfdfd;
  /* Slightly warm off-white for panels/sections */
  --color-off-white-active: #dae0e578;
  /* Slightly warm off-white for panels/sections */
  --color-dark: #2c3e50;
  /* Very dark gray/blue for text */
  --color-text: #34495e;
  /* Main text color (dark slate) */
  --color-text-muted: #7f8c8d;
  /* Muted gray text */
  --color-white: #ffffff;
  /* Pure white for cards, modals, buttons */
  --color-near-white: rgba(255, 255, 255, 0.9);
  /* Semi-transparent white for hover states */

  /* Border & divider colors */
  --color-border-light: #e2e8f0;
  /* Light border color */
  --color-border: #dee2e6;
  /* Border color */
  --color-border-dark: #cbd5e0;
  /* Darker border for emphasis */
  --color-divider: #ecf0f1;
  /* Divider/separator color */

  /* Special status colors */
  --color-published: #27ae60;
  /* Green for published forms */
  --color-draft: #95a5a6;
  /* Gray for draft forms */
  --color-error: #e74c3c;
  /* Red for errors */
  --color-preview: #f39c12;
  /* Orange for preview state */

  /* ============================================================
     FAVORITE ICON COLORS (Profile Tagging System)
     ============================================================
     INDEPENDENT from Status colors — may evolve separately
     Used for: Profile detail buttons (#btn-star, #btn-question, etc.)
     + Dashboard favorite icon summary badges (.badge-fav-*)
     Strategy: Own color palette allows independent customization
     if tagging colors need to differ from button/badge colors
     ============================================================ */

  --color-fav-star-badge: #f39c12;
  --color-fav-question-badge: #27ae60;
  --color-fav-minus-badge: #e74c3c;
  --color-fav-registered-badge: #ab30ab;

  --color-fav-star: #ffd700;
  --color-fav-question: #90ee90;
  --color-fav-minus: #ff7f7f;
  --color-fav-registered: #9b59b6;

  /* Favorite Icon Text Colors (inverse for badges) */
  --color-fav-text-light: #000;
  /* Dark text on light fav backgrounds (star, question) */
  --color-fav-text-dark: var(--color-light);
  /* White text on dark fav backgrounds (minus, registered) */

  /* ============================================
     TYPOGRAPHY SCALE
     ============================================ */

  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Monaco', 'Courier New', monospace;

  /* Font sizes */
  --font-size-h1: 2rem;
  /* 32px */
  --font-size-h2: 1.75rem;
  /* 28px */
  --font-size-h3: 1.5rem;
  /* 24px */
  --font-size-h4: 1.25rem;
  /* 20px */
  --font-size-h5: 1.125rem;
  /* 18px */
  --font-size-h6: 1rem;
  /* 16px */
  --font-size-body: 0.875rem;
  /* 14px (standard body text) */
  --font-size-small: 0.75rem;
  /* 12px (small labels, hints) */
  --font-size-code: 0.8125rem;
  /* 13px (code blocks) */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ============================================
     SPACING SCALE (multiples of 4px)
     ============================================ */

  --spacing-0: 0;
  --spacing-1: 0.25rem;
  /* 4px */
  --spacing-2: 0.5rem;
  /* 8px */
  --spacing-3: 0.75rem;
  /* 12px */
  --spacing-4: 1rem;
  /* 16px */
  --spacing-5: 1.25rem;
  /* 20px */
  --spacing-6: 1.5rem;
  /* 24px */
  --spacing-8: 2rem;
  /* 32px */
  --spacing-10: 2.5rem;
  /* 40px */

  /* ============================================
     SHADOW TOKENS
     ============================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* ============================================
     BORDER-RADIUS TOKENS
     ============================================ */

  --radius-sm: 0.25rem;
  /* 4px (small pills, tight borders) */
  --radius-md: 0.5rem;
  /* 8px (standard border radius) */
  --radius-lg: 0.75rem;
  /* 12px (larger cards, modals) */
  --radius-xl: 1rem;
  /* 16px (extra large rounded elements) */
  --radius-full: 9999px;
  /* Fully rounded (pills, circles) */

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

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

/* ============================================
   TYPOGRAPHY — Heading & Text Styles
   ============================================ */

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin-bottom: var(--spacing-4);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin-bottom: var(--spacing-3);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-dark);
  margin-bottom: var(--spacing-3);
}

h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
  color: var(--color-dark);
  margin-bottom: var(--spacing-2);
}

h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-normal);
}

h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-normal);
}

h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-normal);
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-light);
}

p {
  margin-bottom: var(--spacing-4);
}

small {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-code);
  background-color: var(--color-divider);
  color: var(--color-dark);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
}

/* ============================================
   COMPONENTS — Button Styles
   ============================================ */

/* Only apply design tokens to explicitly scoped buttons — do NOT override Bootstrap btn sizing globally */
.btn {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

/* Button color variants using design system variables */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-success {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

.btn-success:hover {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
  color: var(--color-white);
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-white);
}

.btn-danger:hover {
  background-color: var(--color-danger-dark);
  border-color: var(--color-danger-dark);
  color: var(--color-white);
}

.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-white);
}

.btn-warning:hover {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
  color: var(--color-white);
}

.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: var(--color-white);
}

.btn-info:hover {
  background-color: var(--color-info-dark);
  border-color: var(--color-info-dark);
  color: var(--color-white);
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

.btn-dark {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.btn-dark:hover {
  background-color: #1a252f;
  border-color: #1a252f;
  color: var(--color-white);
}

.btn-light {
  background-color: var(--color-light);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn-light:hover {
  background-color: var(--color-divider);
  border-color: var(--color-border);
  color: var(--color-dark);
}

/* Button hover & active states */
.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active {
  transform: translateY(1px);
}

/* ============================================
   COMPONENTS — Card Styles
   ============================================ */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: var(--spacing-4);
  background-color: var(--color-light);
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--font-weight-semibold);
}

.card-body {
  padding: var(--spacing-4);
}

.card-footer {
  padding: var(--spacing-4);
  background-color: var(--color-light);
  border-top: 1px solid var(--color-border);
}

/* ============================================
   COMPONENTS — Modal Styles
   ============================================ */

.modal-header {
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body {
  padding: var(--spacing-4);
}

.modal-footer {
  padding: var(--spacing-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-end;
}

/* ============================================
   COMPONENTS — Form Styles
   ============================================ */

.form-group {
  margin-bottom: var(--spacing-4);
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: var(--spacing-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* ============================================
   COMPONENTS — Badge Styles
   ============================================ */

.badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.badge-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.badge-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.badge-warning {
  background-color: var(--color-warning);
  color: var(--color-white);
}

.badge-info {
  background-color: var(--color-info);
  color: var(--color-white);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.badge-dark {
  background-color: var(--color-dark);
  color: var(--color-white);
}

.badge-light {
  background-color: var(--color-divider);
  color: var(--color-text);
}

/* badge-purple used on fav registered icon */
.badge-purple {
  background-color: var(--color-fav-registered);
  color: var(--color-white);
}

.badge-pill {
  border-radius: var(--radius-full);
  padding: var(--spacing-1) var(--spacing-3);
}

/* ============================================
   COMPONENTS — Table Styles
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
}

thead {
  background-color: var(--color-light);
  border-bottom: 2px solid var(--color-border-dark);
}

th {
  padding: var(--spacing-3);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-dark);
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

td {
  padding: var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
}

tbody tr:hover {
  background-color: var(--color-light);
  transition: background-color var(--transition-fast);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing utilities */
.m-0 {
  margin: var(--spacing-0);
}

.m-1 {
  margin: var(--spacing-1);
}

.m-2 {
  margin: var(--spacing-2);
}

.m-3 {
  margin: var(--spacing-3);
}

.m-4 {
  margin: var(--spacing-4);
}

.m-5 {
  margin: var(--spacing-5);
}

.m-6 {
  margin: var(--spacing-6);
}

.m-8 {
  margin: var(--spacing-8);
}

.m-10 {
  margin: var(--spacing-10);
}

.mt-1 {
  margin-top: var(--spacing-1);
}

.mt-2 {
  margin-top: var(--spacing-2);
}

.mt-3 {
  margin-top: var(--spacing-3);
}

.mt-4 {
  margin-top: var(--spacing-4);
}

.mt-6 {
  margin-top: var(--spacing-6);
}

.mb-1 {
  margin-bottom: var(--spacing-1);
}

.mb-2 {
  margin-bottom: var(--spacing-2);
}

.mb-3 {
  margin-bottom: var(--spacing-3);
}

.mb-4 {
  margin-bottom: var(--spacing-4);
}

.mb-6 {
  margin-bottom: var(--spacing-6);
}

.ml-1 {
  margin-left: var(--spacing-1);
}

.ml-2 {
  margin-left: var(--spacing-2);
}

.ml-4 {
  margin-left: var(--spacing-4);
}

.mr-1 {
  margin-right: var(--spacing-1);
}

.mr-2 {
  margin-right: var(--spacing-2);
}

.mr-4 {
  margin-right: var(--spacing-4);
}

.p-0 {
  padding: var(--spacing-0);
}

.p-1 {
  padding: var(--spacing-1);
}

.p-2 {
  padding: var(--spacing-2);
}

.p-3 {
  padding: var(--spacing-3);
}

.p-4 {
  padding: var(--spacing-4);
}

.p-6 {
  padding: var(--spacing-6);
}

.p-8 {
  padding: var(--spacing-8);
}

.pt-1 {
  padding-top: var(--spacing-1);
}

.pt-2 {
  padding-top: var(--spacing-2);
}

.pt-4 {
  padding-top: var(--spacing-4);
}

.pb-1 {
  padding-bottom: var(--spacing-1);
}

.pb-2 {
  padding-bottom: var(--spacing-2);
}

.pb-4 {
  padding-bottom: var(--spacing-4);
}

/* Flexbox utilities */
.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.align-items-center {
  align-items: center;
}

.gap-1 {
  gap: var(--spacing-1);
}

.gap-2 {
  gap: var(--spacing-2);
}

.gap-3 {
  gap: var(--spacing-3);
}

.gap-4 {
  gap: var(--spacing-4);
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.text-warning {
  color: var(--color-warning);
}

.text-primary {
  color: var(--color-primary);
}

.fw-bold {
  font-weight: var(--font-weight-bold);
}

.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

.fw-normal {
  font-weight: var(--font-weight-normal);
}

.text-sm {
  font-size: var(--font-size-small);
}

.text-base {
  font-size: var(--font-size-body);
}

/* Border utilities */
.border {
  border: 1px solid var(--color-border);
}

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

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

.rounded {
  border-radius: var(--radius-md);
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

/* Display utilities */
.d-none {
  display: none;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

/* Opacity utilities */
.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

/* Shadow utilities */
.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

/* ============================================
   COMPONENTS — Favorite Icon Styles
   ============================================ */

/* Profile tagging buttons (star, question, minus, registered) */
#btn-star.active .fa-star,
#btn-star:hover .fa-star {
  color: var(--color-fav-star);
  transition: color var(--transition-fast);
}

#btn-question.active .fa-question,
#btn-question:hover .fa-question {
  color: var(--color-fav-question);
  transition: color var(--transition-fast);
}

#btn-minus.active .fa-minus,
#btn-minus:hover .fa-minus {
  color: var(--color-fav-minus);
  transition: color var(--transition-fast);
}

#btn-registered.active .fa-registered,
#btn-registered:hover .fa-registered {
  color: var(--color-fav-registered);
  transition: color var(--transition-fast);
}

/* Badge styles for favorite icons (dashboard summary) — uses -badge suffix variables */
.badge-fav-star {
  background-color: var(--color-fav-star-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-question {
  background-color: var(--color-fav-question-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-minus {
  background-color: var(--color-fav-minus-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-registered {
  background-color: var(--color-fav-registered-badge);
  color: var(--color-fav-text-dark);
}

.badge-fav-none {
  background-color: var(--color-light);
  color: var(--color-text);
}

/* ============================================
   FILE LINK STYLES
   ============================================ */

.file-link {
  display: inline-flex !important;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--color-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  font-size: 0.85rem;
  text-decoration: none !important;
  transition: all var(--transition-normal);
  cursor: pointer;
}

.file-link:hover {
  background-color: var(--color-divider);
  border-color: var(--color-border);
  text-decoration: none !important;
}

.file-link i {
  display: inline;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-right: 0;
}