/* =========================================================
   THEME ROOT + BOOTSTRAP MAPPING
   ========================================================= */

:root {
  /* Bootstrap mapping */
  --bs-body-bg: var(--background-color, #ffffff);
  --bs-body-color: var(--text-color, #111111);

  --bs-primary: var(--primary-color, #0d6efd);
  --bs-primary-rgb: var(--primary-color-rgb, 13, 110, 253);

  --bs-secondary: var(--secondary-color, #6c757d);
  --bs-success: var(--success-color, #198754);
  --bs-danger: var(--danger-color, #dc3545);
  --bs-warning: var(--warning-color, #ffc107);
  --bs-info: var(--info-color, #0dcaf0);

  --bs-border-color: var(--border-color, #dee2e6);
  --bs-border-radius: var(--border-radius, 0.375rem);

  --bs-font-sans-serif: var(
    --font-styles-body-font,
    var(--font-family, system-ui, sans-serif)
  );

  --bs-link-color: var(--primary-color, #0d6efd);
  --bs-link-hover-color: var(--primary-hover-color, #d62839);

  /* Backward-compatible aliases */
  --body-font: var(--font-styles-body-font, var(--font-family, system-ui, sans-serif));
  --heading-font: var(--font-styles-heading-font, var(--font-family, system-ui, sans-serif));
  --accent-font: var(--font-styles-accent-font, var(--heading-font));

  --page-bg: var(--colors-surface-page, var(--background-color, #ffffff));
  --surface-bg: var(--colors-surface-card, var(--surface-color, #ffffff));
  --surface-elevated-bg: var(--colors-surface-elevated, var(--surface-color, #ffffff));

  --text-primary: var(--colors-text-primary, var(--text-color, #111111));
  --text-muted: var(--colors-text-secondary, var(--muted-text-color, #666666));
  --text-inverse: var(--colors-text-inverse, var(--on-primary-color, #ffffff));

  --brand-primary: var(--colors-brand-primary, var(--primary-color, #0d6efd));
  --brand-primary-hover: var(--colors-brand-primary-hover, var(--primary-hover-color, var(--brand-primary)));

  --brand-secondary: var(--colors-brand-secondary, var(--secondary-color, #6c757d));
  --brand-secondary-hover: var(--colors-brand-secondary-hover, var(--secondary-hover-color, var(--brand-secondary)));

  --radius-sm: var(--radius-sm, 0.25rem);
  --radius-md: var(--radius-md, var(--border-radius, 0.4rem));
  --radius-lg: var(--radius-lg, 0.75rem);
  --radius-xl: var(--radius-xl, 1rem);
  --radius-pill: var(--radius-pill, 999px);

  --shadow-card: var(--card-shadow, var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1)));

  --motion-default: var(--motion-default, var(--transition, all 0.3s ease));
  --motion-fast: var(--motion-fast, 150ms ease);

  /* Component aliases */
  --button-radius: var(--button-border-radius, 0.5rem);
  --button-height-sm: var(--button-height-sm, 34px);
  --button-height-md: var(--button-height-md, 42px);
  --button-height-lg: var(--button-height-lg, 50px);
  --button-padding-x: var(--button-padding-x, var(--spacing-md, 1rem));

  --input-height: var(--input-height, 44px);
  --input-radius: var(--input-border-radius, 0.5rem);

  --card-bg: var(--card-background-color, var(--surface-bg));
  --card-border-color: var(--card-border-color, var(--border-color, #dee2e6));
  --card-radius: var(--card-border-radius, 0.5rem);
  --card-padding: var(--card-padding, var(--spacing-md, 1rem));

  --navbar-bg: var(--navbar-background-color, var(--page-bg));
  --navbar-text: var(--navbar-text-color, var(--text-primary));
  --navbar-hover: var(--navbar-hover-color, var(--brand-primary));

  --footer-bg: var(--footer-background-color, var(--surface-bg));
  --footer-text: var(--footer-text-color, var(--text-primary));

    --theme-name: Crimson Noir;
  --theme-type: default;
  --density: medium;
  --primary-color: #d62839;
  --primary-hover-color: #b61f2f;
  --secondary-color: #ff7b54;
  --secondary-hover-color: #ff6333;
  --success-color: #4ade80;
  --warning-color: #facc15;
  --danger-color: #ef4444;
  --danger-hover-color: #dc2626;
  --info-color: #38bdf8;
  --background-color: #111111;
  --surface-color: #505050;
  --surface-elevated-color: #505050;
  --alternate-row-color: #262626;
  --text-color: #f5f5f5;
  --muted-text-color: #b0b0b0;
  --on-primary-color: #ffffff;
  --on-background-color: #f5f5f5;
  --border-color: #343434;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --navbar-background-color: #161616;
  --navbar-text-color: #f5f5f5;
  --navbar-hover-color: #ff7b54;
  --navbar-blur: blur(12px);
  --navbar-shadow: 0 2px 12px rgba(0,0,0,0.35);
  --footer-background-color: #161616;
  --footer-text-color: #f5f5f5;
  --border-radius: 0.6rem;
  --transition: all 0.25s ease;
  --font-family: 'Inter', sans-serif;
  --font-styles-body-font: 'Inter', sans-serif;
  --font-styles-heading-font: 'Montserrat', sans-serif;
  --font-styles-accent-font: 'Playfair Display', serif;
  --font-styles-display-font: 'Bebas Neue', sans-serif;
  --font-sizes-xs: 0.75rem;
  --font-sizes-sm: 0.875rem;
  --font-sizes-md: 1rem;
  --font-sizes-lg: 1.25rem;
  --font-sizes-xl: 1.5rem;
  --font-sizes-2xl: 2rem;
  --font-sizes-3xl: 3rem;
  --font-sizes-4xl: 4rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;
  --shadows-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadows-md: 0 6px 14px rgba(0,0,0,0.4);
  --shadows-lg: 0 18px 36px rgba(0,0,0,0.5);
  --motion-fast: 150ms ease;
  --motion-normal: 250ms ease;
  --motion-slow: 500ms ease;
  --motion-default: all 0.25s ease;
  --layout-container-width: 1320px;
  --layout-section-spacing: 5rem;
  --layout-grid-gap: 1.5rem;
  --layout-navbar-height: 72px;
  --layout-footer-spacing: 4rem;
  --button-border-radius: 0.5rem;
  --button-padding-x: 1rem;
  --card-background-color: #1a1a1a;
  --card-border-color: #343434;
  --card-border-radius: 0.75rem;
  --card-padding: 1rem;
  --card-shadow: 0 6px 14px rgba(0,0,0,0.4);
  --card-hover-shadow: 0 18px 36px rgba(0,0,0,0.5);
  --card-title-color: #ff7b54;
  --card-text-color: #f5f5f5;
  --input-height: 44px;
  --input-border-radius: 0.5rem;
  --input-background-color: #1a1a1a;
  --input-border-color: #343434;
  --input-text-color: #f5f5f5;
  --input-placeholder-color: #999999;
  --input-focus-border-color: #d62839;
  --table-background-color: #1a1a1a;
  --table-text-color: #f5f5f5;
  --table-head-background-color: #262626;
  --table-head-text-color: #f5f5f5;
  --table-hover-background-color: #2d2d2d;
  --table-border-color: #343434;

}

/* =========================================================
   BASE
   ========================================================= */

html {
  background-color: var(--page-bg);
}

body {
  background-color: var(--page-bg);
  color: var(--text-primary);
  font-family: var(--body-font);
  transition: all 0.25s ease;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--text-primary);
  line-height: var(--heading-line-height, 1.2);
  letter-spacing: var(--heading-letter-spacing, -0.01em);
}

p {
  font-family: var(--body-font);
  color: var(--text-primary);
  line-height: var(--body-line-height, 1.6);
}

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

.text-accent,
.hero-subtitle,
.quote-text {
  font-family: var(--accent-font);
}

/* =========================================================
   LINKS
   ========================================================= */

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color 150ms ease;
}

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

/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  box-shadow: var(--navbar-shadow, var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)));
  backdrop-filter: var(--navbar-blur, none);
  -webkit-backdrop-filter: var(--navbar-blur, none);
  transition: all 0.25s ease;
}

.navbar a {
  color: var(--navbar-text);
  text-decoration: none;
  transition: color 150ms ease;
}

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

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  min-height: var(--button-height-md);
  padding-inline: 1rem;
  border-radius: var(--button-radius);
  transition: all 0.25s ease;
  box-shadow: var(--button-shadow, var(--shadow-sm, none));
}

.btn-sm {
  min-height: var(--button-height-sm);
}

.btn-lg {
  min-height: var(--button-height-lg);
}

.btn-primary {
  background-color: var(--button-primary-bg, var(--brand-primary));
  border-color: var(--button-primary-border, var(--brand-primary));
  color: var(--button-primary-text, var(--text-inverse));
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--button-primary-hover-bg, var(--brand-primary-hover));
  border-color: var(--button-primary-hover-border, var(--brand-primary-hover));
  color: var(--button-primary-hover-text, var(--text-inverse));
  box-shadow: var(--button-hover-shadow, var(--shadow-md, none));
}

.btn-secondary {
  background-color: var(--button-secondary-bg, var(--brand-secondary));
  border-color: var(--button-secondary-border, var(--brand-secondary));
  color: var(--button-secondary-text, var(--text-inverse));
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--button-secondary-hover-bg, var(--brand-secondary-hover));
  border-color: var(--button-secondary-hover-border, var(--brand-secondary-hover));
  color: var(--button-secondary-hover-text, var(--text-inverse));
}

.btn-danger {
  background-color: var(--danger-color, #dc3545);
  border-color: var(--danger-color, #dc3545);
  color: var(--on-primary-color, #ffffff);
}

.btn-danger:hover {
  background-color: var(--danger-hover-color, #ef4444);
  border-color: var(--danger-hover-color, #ef4444);
}

/* Outline buttons */

.btn-outline-primary {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  color: var(--text-inverse);
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.btn-outline-secondary {
  color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: var(--text-inverse);
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn-outline-danger {
  color: var(--danger-color, #dc3545);
  border-color: var(--danger-color, #dc3545);
  background-color: transparent;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
  color: var(--on-primary-color, #ffffff);
  background-color: var(--danger-color, #dc3545);
  border-color: var(--danger-color, #dc3545);
}

/* Disabled */

.btn:disabled,
.btn[disabled],
fieldset:disabled .btn {
  background-color: var(--disabled-bg, var(--border-color, #dee2e6));
  border-color: var(--disabled-border, var(--border-color, #dee2e6));
  color: var(--disabled-text, var(--text-muted));
  opacity: var(--disabled-opacity, 0.65);
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================================================
   CARD
   ========================================================= */

.card {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid #343434;
  border-radius: var(--card-radius);
  padding: 1rem;
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
}

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

.card-title {
  color: var(--card-title-color, var(--brand-primary));
  font-family: var(--card-title-font, var(--heading-font));
  font-weight: var(--card-title-font-weight, var(--font-weight-bold, 700));
}

.card-text {
  color: var(--card-text-color, var(--text-primary));
  font-family: var(--card-text-font, var(--body-font));
}

/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select {
  min-height: 44px;
  background-color: var(--input-bg, var(--surface-bg));
  border: 1px solid var(--input-border-color, var(--border-color, #dee2e6));
  border-radius: var(--input-radius);
  color: var(--input-text-color, var(--text-primary));
  transition: all 0.25s ease;
  box-shadow: var(--input-shadow, var(--shadow-sm, none));
}

.form-control::placeholder {
  color: var(--input-placeholder-color, var(--text-muted));
}

.form-control:focus,
.form-select:focus {
  background-color: var(--input-focus-bg, var(--surface-bg));
  border-color: var(--input-focus-border-color, var(--brand-primary));
  color: var(--input-focus-text-color, var(--text-primary));
  box-shadow: var(
    --input-focus-shadow,
    0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 25%, transparent)
  );
}

.form-group {
  margin-bottom: var(--form-group-margin-bottom, var(--spacing-lg, 1.5rem));
}

/* =========================================================
   TABLE
   ========================================================= */

.table {
  --bs-table-bg: var(--table-bg, var(--surface-bg));
  --bs-table-color: var(--table-text-color, var(--text-primary));
  --bs-table-border-color: var(--table-border-color, var(--border-color, #dee2e6));
  --bs-table-striped-bg: var(--table-striped-bg, var(--alternate-row-color, #f8f9fa));
  --bs-table-hover-bg: var(--table-hover-bg, var(--alternate-row-color, #f8f9fa));
  --bs-table-hover-color: var(--table-hover-text-color, var(--text-primary));

  border: 1px solid var(--table-border-color, var(--border-color, #dee2e6));
  box-shadow: var(--table-shadow, var(--shadow-sm, none));
}

.table thead {
  background-color: var(--table-head-bg, var(--alternate-row-color, #f8f9fa));
  color: var(--table-head-text-color, var(--text-primary));
}

/* =========================================================
   SIDEBAR / FOOTER
   ========================================================= */

.sidebar {
  background-color: var(--sidebar-bg, var(--surface-bg));
  color: var(--sidebar-text-color, var(--text-primary));
  box-shadow: var(--sidebar-shadow, var(--shadow-sm, none));
  transition: all 0.25s ease;
}

.footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  box-shadow: var(--footer-shadow, var(--shadow-sm, none));
  transition: all 0.25s ease;
}

.footer a {
  color: var(--footer-link-color, var(--footer-text));
}

.footer a:hover {
  color: var(--footer-link-hover-color, var(--brand-primary));
}

/* =========================================================
   UTILITIES
   ========================================================= */

.shadow-sm {
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
}

.shadow-md {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1)) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.15)) !important;
}

.p-relative {
  position: relative;
}

/* =========================================================
   SPECIAL THEME EFFECTS
   ========================================================= */

[data-theme-type="metallic"] .card {
  background-image: var(--metallic-sheen, none);
  background-blend-mode: var(--surface-blend-mode, lighten);
}

[data-theme-type="glass"] .card,
[data-theme-type="glass"] .navbar {
  backdrop-filter: var(--glass-blur, blur(10px) saturate(180%));
  -webkit-backdrop-filter: var(--glass-blur, blur(10px) saturate(180%));
  background-color: color-mix(in srgb, var(--surface-bg) 75%, transparent);
}

[data-theme-type="neon"] .btn-primary {
  box-shadow: var(--glow-shadow, 0 0 10px var(--glow-color, var(--brand-primary)));
}

[data-theme-type="neon"] .btn-primary:hover {
  box-shadow: var(--glow-hover-shadow, 0 0 20px var(--glow-color, var(--brand-primary)));
}