/*! Lion Cage design tokens
 *
 * The single source of truth for colour, type, spacing, radius and shadow.
 * Load after Bootstrap and before lioncage.css. See styleguide.php for the
 * rendered reference.
 */

:root {
  /* ---- Brand palette ------------------------------------------------- */
  --lc-gold-50:  #FBF7EA;
  --lc-gold-100: #F4EBCB;
  --lc-gold-300: #E6D08A;
  --lc-gold-500: #D5B651;   /* primary brand gold */
  --lc-gold-600: #BE9C38;
  --lc-gold-700: #846A22;   /* gold text on white: 5.2:1 */

  --lc-olive-50:  #F1F3EE;
  --lc-olive-100: #E1E5DA;
  --lc-olive-300: #8E9A7E;
  --lc-olive-500: #556147;
  --lc-olive-700: #374030;  /* brand olive */
  --lc-olive-900: #232A1E;

  --lc-black:     #0E0E0C;
  --lc-ink:       #1A1A17;
  --lc-charcoal:  #2C2C28;
  --lc-stone-600: #5F5E57;
  --lc-stone-400: #9A988F;
  --lc-stone-200: #DDDBD3;
  --lc-stone-100: #EEEDE7;
  --lc-stone-50:  #F7F6F2;
  --lc-white:     #FFFFFF;

  /* Status - toned to sit with the palette */
  --lc-success: #3F7A4F;
  --lc-warning: #C68A1E;
  --lc-danger:  #A63A26;
  --lc-info:    #3B6A8A;

  /* ---- Semantic roles (use these in components) ---------------------- */
  --lc-bg:              var(--lc-stone-50);
  --lc-surface:         var(--lc-white);
  --lc-surface-muted:   var(--lc-stone-100);
  --lc-surface-dark:    var(--lc-ink);
  --lc-surface-darker:  var(--lc-black);
  --lc-text:            #1F1F1C;
  --lc-text-muted:      var(--lc-stone-600);
  --lc-text-on-dark:    #F4F2EB;
  --lc-text-on-dark-muted: rgba(244, 242, 235, 0.72);
  --lc-border:          var(--lc-stone-200);
  --lc-border-on-dark:  rgba(255, 255, 255, 0.14);
  --lc-accent:          var(--lc-gold-500);
  --lc-accent-hover:    var(--lc-gold-600);
  --lc-on-accent:       var(--lc-black);   /* text on gold: 10:1 contrast */
  --lc-accent-text:     var(--lc-gold-700); /* gold text on light backgrounds */
  --lc-link:            var(--lc-olive-700);
  --lc-link-hover:      var(--lc-gold-700);
  --lc-overlay:         rgba(10, 10, 8, 0.72);
  --lc-focus-ring:      0 0 0 3px rgba(213, 182, 81, 0.45);

  /* ---- Typography ---------------------------------------------------- */
  --lc-font-body:    'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --lc-font-display: 'BlairITC TT', 'Outfit', system-ui, sans-serif;
  --lc-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale: min at 360px viewport, max at ~1440px */
  --lc-fs-xs:   0.8125rem;
  --lc-fs-sm:   0.875rem;
  --lc-fs-base: 1rem;
  --lc-fs-lg:   clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --lc-fs-xl:   clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --lc-fs-2xl:  clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --lc-fs-3xl:  clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --lc-fs-4xl:  clamp(2.125rem, 1.5rem + 3vw, 4rem);

  --lc-lh-tight: 1.15;
  --lc-lh-snug:  1.35;
  --lc-lh-body:  1.6;
  --lc-tracking-caps: 0.08em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --lc-space-1: 0.25rem;
  --lc-space-2: 0.5rem;
  --lc-space-3: 0.75rem;
  --lc-space-4: 1rem;
  --lc-space-5: 1.5rem;
  --lc-space-6: 2rem;
  --lc-space-7: 3rem;
  --lc-space-8: 4rem;
  --lc-section-y: clamp(3rem, 2rem + 4vw, 6rem);

  /* ---- Layout -------------------------------------------------------- */
  --lc-container:        1200px;
  --lc-container-narrow: 820px;
  --lc-gutter:           clamp(1rem, 0.6rem + 2vw, 2rem);
  --lc-nav-height:       72px;

  /* ---- Shape & depth ------------------------------------------------- */
  --lc-radius-sm:   6px;
  --lc-radius:      10px;
  --lc-radius-lg:   16px;
  --lc-radius-pill: 999px;

  --lc-shadow-sm: 0 1px 2px rgba(14, 14, 12, 0.06), 0 1px 3px rgba(14, 14, 12, 0.08);
  --lc-shadow:    0 4px 12px rgba(14, 14, 12, 0.08), 0 2px 4px rgba(14, 14, 12, 0.06);
  --lc-shadow-lg: 0 12px 32px rgba(14, 14, 12, 0.14), 0 4px 8px rgba(14, 14, 12, 0.06);

  --lc-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --lc-duration: 180ms;
}


/* ======================================================================
   Bootstrap 5.3 mapping - makes stock Bootstrap classes come out on-brand
   ====================================================================== */

:root,
[data-bs-theme="light"] {
  --bs-body-font-family: var(--lc-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: var(--lc-lh-body);
  --bs-body-color: var(--lc-text);
  --bs-body-color-rgb: 31, 31, 28;
  --bs-body-bg: var(--lc-bg);
  --bs-body-bg-rgb: 247, 246, 242;
  --bs-emphasis-color: var(--lc-black);
  --bs-secondary-color: var(--lc-text-muted);
  --bs-tertiary-bg: var(--lc-stone-100);

  --bs-primary: var(--lc-gold-500);
  --bs-primary-rgb: 213, 182, 81;
  --bs-secondary: var(--lc-olive-700);
  --bs-secondary-rgb: 55, 64, 48;
  --bs-success: var(--lc-success);
  --bs-success-rgb: 63, 122, 79;
  --bs-warning: var(--lc-warning);
  --bs-warning-rgb: 198, 138, 30;
  --bs-danger: var(--lc-danger);
  --bs-danger-rgb: 166, 58, 38;
  --bs-info: var(--lc-info);
  --bs-info-rgb: 59, 106, 138;
  --bs-dark: var(--lc-ink);
  --bs-dark-rgb: 26, 26, 23;
  --bs-light: var(--lc-stone-50);
  --bs-light-rgb: 247, 246, 242;

  --bs-primary-text-emphasis: var(--lc-gold-700);
  --bs-primary-bg-subtle: var(--lc-gold-50);
  --bs-primary-border-subtle: var(--lc-gold-300);
  --bs-secondary-text-emphasis: var(--lc-olive-900);
  --bs-secondary-bg-subtle: var(--lc-olive-50);
  --bs-secondary-border-subtle: var(--lc-olive-300);

  --bs-link-color: var(--lc-link);
  --bs-link-color-rgb: 55, 64, 48;
  --bs-link-hover-color: var(--lc-link-hover);
  --bs-link-hover-color-rgb: 132, 106, 34;

  --bs-border-color: var(--lc-border);
  --bs-border-radius: var(--lc-radius);
  --bs-border-radius-sm: var(--lc-radius-sm);
  --bs-border-radius-lg: var(--lc-radius-lg);
  --bs-border-radius-xl: var(--lc-radius-lg);
  --bs-border-radius-pill: var(--lc-radius-pill);
  --bs-box-shadow: var(--lc-shadow);
  --bs-box-shadow-sm: var(--lc-shadow-sm);
  --bs-box-shadow-lg: var(--lc-shadow-lg);

  --bs-focus-ring-color: rgba(213, 182, 81, 0.45);
  --bs-heading-color: inherit;
}

/* Buttons - Bootstrap compiles these per class, so remap the class vars */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-border-radius: var(--lc-radius-sm);
  --bs-btn-focus-box-shadow: var(--lc-focus-ring);
  letter-spacing: 0.02em;
  transition: background-color var(--lc-duration) var(--lc-ease),
              border-color var(--lc-duration) var(--lc-ease),
              color var(--lc-duration) var(--lc-ease),
              box-shadow var(--lc-duration) var(--lc-ease);
}
.btn-lg { --bs-btn-padding-x: 1.75rem; --bs-btn-padding-y: 0.75rem; --bs-btn-border-radius: var(--lc-radius); }
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.3rem; }

.btn-primary {
  --bs-btn-color: var(--lc-on-accent);
  --bs-btn-bg: var(--lc-gold-500);
  --bs-btn-border-color: var(--lc-gold-500);
  --bs-btn-hover-color: var(--lc-on-accent);
  --bs-btn-hover-bg: var(--lc-gold-600);
  --bs-btn-hover-border-color: var(--lc-gold-600);
  --bs-btn-active-color: var(--lc-on-accent);
  --bs-btn-active-bg: var(--lc-gold-700);
  --bs-btn-active-border-color: var(--lc-gold-700);
  --bs-btn-disabled-color: var(--lc-on-accent);
  --bs-btn-disabled-bg: var(--lc-gold-300);
  --bs-btn-disabled-border-color: var(--lc-gold-300);
}
.btn-secondary {
  --bs-btn-color: var(--lc-white);
  --bs-btn-bg: var(--lc-olive-700);
  --bs-btn-border-color: var(--lc-olive-700);
  --bs-btn-hover-color: var(--lc-white);
  --bs-btn-hover-bg: var(--lc-olive-900);
  --bs-btn-hover-border-color: var(--lc-olive-900);
  --bs-btn-active-color: var(--lc-white);
  --bs-btn-active-bg: var(--lc-olive-900);
  --bs-btn-active-border-color: var(--lc-olive-900);
  --bs-btn-disabled-bg: var(--lc-olive-300);
  --bs-btn-disabled-border-color: var(--lc-olive-300);
}
.btn-dark {
  --bs-btn-color: var(--lc-text-on-dark);
  --bs-btn-bg: var(--lc-black);
  --bs-btn-border-color: var(--lc-black);
  --bs-btn-hover-color: var(--lc-white);
  --bs-btn-hover-bg: var(--lc-charcoal);
  --bs-btn-hover-border-color: var(--lc-charcoal);
  --bs-btn-active-bg: var(--lc-charcoal);
  --bs-btn-active-border-color: var(--lc-charcoal);
}
.btn-outline-primary {
  --bs-btn-color: var(--lc-gold-700);
  --bs-btn-border-color: var(--lc-gold-500);
  --bs-btn-hover-color: var(--lc-on-accent);
  --bs-btn-hover-bg: var(--lc-gold-500);
  --bs-btn-hover-border-color: var(--lc-gold-500);
  --bs-btn-active-color: var(--lc-on-accent);
  --bs-btn-active-bg: var(--lc-gold-600);
  --bs-btn-active-border-color: var(--lc-gold-600);
}
.btn-outline-secondary {
  --bs-btn-color: var(--lc-olive-700);
  --bs-btn-border-color: var(--lc-olive-300);
  --bs-btn-hover-color: var(--lc-white);
  --bs-btn-hover-bg: var(--lc-olive-700);
  --bs-btn-hover-border-color: var(--lc-olive-700);
  --bs-btn-active-color: var(--lc-white);
  --bs-btn-active-bg: var(--lc-olive-900);
  --bs-btn-active-border-color: var(--lc-olive-900);
}
.btn-outline-light {
  --bs-btn-color: var(--lc-text-on-dark);
  --bs-btn-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-color: var(--lc-black);
  --bs-btn-hover-bg: var(--lc-text-on-dark);
  --bs-btn-hover-border-color: var(--lc-text-on-dark);
}
.btn-link {
  --bs-btn-color: var(--lc-link);
  --bs-btn-hover-color: var(--lc-link-hover);
  --bs-btn-font-weight: 500;
}

/* Form controls */
.form-control,
.form-select {
  border-radius: var(--lc-radius-sm);
  border-color: var(--lc-border);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--lc-gold-500);
  box-shadow: var(--lc-focus-ring);
}
.form-check-input:checked {
  background-color: var(--lc-olive-700);
  border-color: var(--lc-olive-700);
}
.form-check-input:focus { border-color: var(--lc-gold-500); box-shadow: var(--lc-focus-ring); }
.form-label { font-weight: 500; }
/* Floating labels inside input groups must shrink rather than overflow */
.input-group > .form-floating { min-width: 0; }
.form-floating > label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Navigation, pagination and progress */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--lc-olive-700);
  --bs-nav-pills-link-active-color: var(--lc-white);
  --bs-nav-pills-border-radius: var(--lc-radius-pill);
}
.nav { --bs-nav-link-color: var(--lc-link); --bs-nav-link-hover-color: var(--lc-link-hover); }
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--lc-text);
  --bs-nav-tabs-link-active-border-color: var(--lc-border) var(--lc-border) var(--lc-surface);
}
.pagination {
  --bs-pagination-color: var(--lc-olive-700);
  --bs-pagination-hover-color: var(--lc-olive-900);
  --bs-pagination-active-bg: var(--lc-olive-700);
  --bs-pagination-active-border-color: var(--lc-olive-700);
  --bs-pagination-focus-box-shadow: var(--lc-focus-ring);
}
.progress { --bs-progress-bar-bg: var(--lc-gold-500); --bs-progress-bg: var(--lc-stone-100); }
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--lc-gold-500);
  --bs-dropdown-link-active-color: var(--lc-on-accent);
  --bs-dropdown-border-color: var(--lc-border);
  --bs-dropdown-border-radius: var(--lc-radius);
  --bs-dropdown-box-shadow: var(--lc-shadow-lg);
}
.card {
  --bs-card-border-color: var(--lc-border);
  --bs-card-border-radius: var(--lc-radius-lg);
  --bs-card-inner-border-radius: calc(var(--lc-radius-lg) - 1px);
  --bs-card-cap-bg: var(--lc-surface-muted);
}
.modal { --bs-modal-border-radius: var(--lc-radius-lg); --bs-modal-border-color: transparent; }
.table { --bs-table-striped-bg: rgba(55, 64, 48, 0.035); --bs-table-hover-bg: rgba(213, 182, 81, 0.08); }
.badge { --bs-badge-font-weight: 600; letter-spacing: 0.02em; }
.badge.bg-primary, .text-bg-primary, .badge.bg-warning, .text-bg-warning { color: var(--lc-on-accent) !important; }