/* ============================================================
   core.css — Universal foundation
   Tokens, typography, page shell, buttons, Bootstrap overrides,
   utility classes.  Loaded by every base template.
   ============================================================ */


/* ============================================================
   1) DESIGN TOKENS
   ============================================================ */
:root {
  /* ---- Colour palette ---- */
  --wd-black:   #000;
  --wd-white:   #fff;

  /* Glass / frosted overlays (white @ opacity) */
  --wd-glass-05:  rgba(255, 255, 255, 0.05);
  --wd-glass-10:  rgba(255, 255, 255, 0.10);
  --wd-glass-20:  rgba(255, 255, 255, 0.20);
  --wd-glass-30:  rgba(255, 255, 255, 0.30);
  --wd-glass-50:  rgba(255, 255, 255, 0.50);

  /* Dark overlays (black @ opacity) */
  --wd-overlay-10: rgba(0, 0, 0, 0.10);
  --wd-overlay-05: rgba(0, 0, 0, 0.05);

  /* Semantic colours */
  --wd-red-bright:  #d61600;
  --wd-red-danger:  #f2160a;
  --wd-blue-dark:   #001748;

  /* Borders */
  --wd-border-light:   rgba(255, 255, 255, 0.20);
  --wd-border-medium:  rgba(255, 255, 255, 0.30);
  --wd-border-strong:  rgba(255, 255, 255, 0.50);

  /* Text colours */
  --wd-text-primary:   var(--wd-white);
  --wd-text-muted:     rgba(255, 255, 255, 0.50);
  --wd-text-disabled:  rgba(0, 0, 0, 0.60);

  /* ---- Typography ---- */
  --wd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Border radii ---- */
  --wd-radius-xs:    4px;
  --wd-radius-sm:    8px;
  --wd-radius-lg:    12px;
  --wd-radius-md:    20px;
  --wd-radius-pill:  9999px;

  /* ---- Layout ---- */
  --wd-page-width:   1440px;
  --wd-page-min-h:   800px;
  --wd-form-max-w:   400px;
  --wd-info-max-w:   600px;
  --wd-confirm-max-w: 500px;
  --wd-settings-max-w: 600px;
  --wd-drawer-w:     500px;
  --wd-modal-w:      500px;

  /* ---- Spacing scale (from Figma gaps) ---- */
  --wd-space-1:  4px;
  --wd-space-2:  6px;
  --wd-space-3:  8px;
  --wd-space-4:  10px;
  --wd-space-5:  20px;
  --wd-space-6:  30px;
  --wd-space-7:  50px;

  /* ---- Component heights ---- */
  --wd-input-h:       3.125rem;   /* 50px */
  --wd-input-h-lg:    3.125rem;   /* 50px */
  --wd-btn-h-lg:      50px;
  --wd-btn-h-md:      40px;
  --wd-toggle-h:      20px;
  --wd-toggle-w:      40px;
  --wd-toggle-thumb:  16px;
  --wd-loader-h:      6px;
  --wd-loader-w:      200px;
  --wd-header-h:      80px;
  --wd-btn-h-sm:      30px;
  --wd-avatar-lg:     75px;
  --wd-avatar-sm:     40px;
  --wd-drawer-header-h: 60px;
}


/* ============================================================
   2) BASE & TYPOGRAPHY
   ============================================================ */
html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  background: var(--wd-black);
  color: var(--wd-text-primary);
  font-family: var(--wd-font);
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: var(--wd-white);
  text-decoration: none;
}

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

/* --- Headings --- */
h1, .wd-h1 {
  font-family: var(--wd-font);
  font-size: 28px;
  font-weight: 900;
  line-height: normal;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--wd-text-primary);
}

h2, .wd-h2 {
  font-family: var(--wd-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--wd-text-primary);
}

h3, .wd-h3 {
  font-family: var(--wd-font);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--wd-text-primary);
}

h4, .wd-h4 {
  font-family: var(--wd-font);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  margin: 0;
  color: var(--wd-text-primary);
}

h5, .wd-h5 {
  font-family: var(--wd-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
  color: var(--wd-text-primary);
}

h6, .wd-h6 {
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
  color: var(--wd-text-primary);
}

/* --- Paragraphs --- */
.wd-p1 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
}

.wd-p2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

p, .wd-p3 {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  color: var(--wd-text-primary);
}

.wd-p4, small {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.wd-overline {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.wd-bold {
  font-weight: 700;
}


/* ============================================================
   3) PAGE SHELL & LAYOUT
   ============================================================ */

/* Full-page wrapper — desktop only (1440px) */
.wd-page {
  width: var(--wd-page-width);
  min-width: var(--wd-page-width);
  height: 100%;
  min-height: var(--wd-page-min-h);
  margin: 0 auto;
  background: var(--wd-black);
  position: relative;
}

/* Two-column split layout (auth & application) */
.wd-split {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: var(--wd-page-min-h);
  padding: var(--wd-space-4);
  gap: var(--wd-space-5);
}

/* Left info/branding panel */
.wd-split__info {
  flex: 1 1 0;
  max-width: var(--wd-info-max-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--wd-space-6);
}

/* Right form panel (glass background) */
.wd-split__form {
  flex: 1 1 0;
  background: var(--wd-glass-05);
  border-radius: var(--wd-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner form container (constrains width) */
.wd-form-wrap {
  width: 100%;
  max-width: var(--wd-form-max-w);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--wd-space-6);
}

/* Centered layout (confirmation, loader) */
.wd-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--wd-page-min-h);
  text-align: center;
  gap: var(--wd-space-6);
  max-width: var(--wd-confirm-max-w);
  margin: 0 auto;
}


/* ============================================================
   4) BUTTONS
   Overrides Bootstrap .btn where needed
   ============================================================ */

/* Primary Large: 50px, pill, white bg, black text */
.btn-wd-primary {
  height: var(--wd-btn-h-lg);
  padding: 0 20px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-white);
  color: var(--wd-black);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-wd-primary:hover {
  opacity: 0.9;
  color: var(--wd-black);
}

.btn-wd-primary:active {
  transform: translateY(1px);
}

.btn-wd-primary:disabled,
.btn-wd-primary.is-disabled {
  background: var(--wd-glass-30);
  color: var(--wd-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* Primary Medium: 40px, pill, white bg, black text */
.btn-wd-md {
  height: var(--wd-btn-h-md);
  padding: 0 20px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-white);
  color: var(--wd-black);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-wd-md:hover {
  opacity: 0.9;
  color: var(--wd-black);
}

.btn-wd-md:active {
  transform: translateY(1px);
}

.btn-wd-md:disabled,
.btn-wd-md.is-disabled {
  background: var(--wd-glass-30);
  color: var(--wd-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* Ghost / Glass button: glass bg, white text */
.btn-wd-glass {
  height: var(--wd-btn-h-lg);
  padding: 0 20px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-glass-05);
  color: var(--wd-white);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-wd-glass:hover {
  background: var(--wd-glass-10);
  color: var(--wd-white);
}

.btn-wd-glass:active {
  transform: translateY(1px);
}

.btn-wd-glass:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary: glass bg, white text, 50px */
.btn-wd-secondary {
  height: var(--wd-btn-h-lg);
  padding: 0 20px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-glass-05);
  color: var(--wd-white);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-wd-secondary:hover {
  background: var(--wd-glass-10);
  color: var(--wd-white);
}

.btn-wd-secondary:active {
  transform: translateY(1px);
}

/* Button container (multi-button row) */
.wd-btn-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: var(--wd-space-5) 0 var(--wd-space-6);
}

/* Override width/height from button base styles inside btn-group */
.wd-btn-group .btn-back,
.wd-btn-group .btn-next {
  width: auto;
}

/* Back button: fixed width, stretches to match sibling height */
.wd-btn-group .btn-back {
  width: 120px;
  flex-shrink: 0;
  height: auto;
}

/* Next button fills remaining space */
.wd-btn-group .btn-next {
  flex: 1 1 0;
}

/* Small button: 30px, pill, glass bg, white text */
.btn-wd-sm {
  height: var(--wd-btn-h-sm);
  padding: 0 20px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-glass-05);
  color: var(--wd-white);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-wd-sm:hover {
  background: var(--wd-glass-10);
  color: var(--wd-white);
}

/* Danger text variant — glass bg with red text */
.btn-wd-danger-text {
  color: var(--wd-red-danger);
}

.btn-wd-danger-text:hover {
  color: var(--wd-red-danger);
}

/* Action mini button: 30px, 4px radius, glass-30 bg */
.btn-wd-action {
  height: var(--wd-btn-h-sm);
  width: 50px;
  padding: 0 10px;
  border-radius: var(--wd-radius-xs);
  background: var(--wd-glass-30);
  color: var(--wd-text-muted);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-wd-action:hover {
  background: var(--wd-glass-50);
  color: var(--wd-text-primary);
}

.btn-wd-action--danger {
  background: var(--wd-glass-05);
  color: var(--wd-red-bright);
  width: auto;
}

.btn-wd-action--danger:hover {
  background: var(--wd-glass-10);
}

/* Disabled button: same as primary but glass-30 bg */
.btn-wd-disabled {
  height: var(--wd-btn-h-md);
  padding: 0 20px;
  border-radius: var(--wd-radius-pill);
  background: var(--wd-glass-30);
  color: var(--wd-black);
  border: 0;
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}


/* ============================================================
   26) BOOTSTRAP OVERRIDES
   Scoped inside .wd-page to avoid leaking into other pages
   ============================================================ */

/* Reset Bootstrap form-control dark appearance */
.wd-page .form-control,
.wd-page .form-select {
  background-color: var(--wd-glass-10);
  border: 0;
  border-radius: var(--wd-radius-sm);
  color: var(--wd-text-primary);
  font-family: var(--wd-font);
}

.wd-page .form-control:focus,
.wd-page .form-select:focus {
  background-color: var(--wd-glass-10);
  color: var(--wd-text-primary);
  box-shadow: 0 0 0 1px var(--wd-glass-30);
}

.wd-page .form-control::placeholder {
  color: var(--wd-text-muted);
}

/* Bootstrap .form-label */
.wd-page .form-label {
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wd-text-primary);
  margin-bottom: var(--wd-space-3);
}

/* Bootstrap .form-text */
.wd-page .form-text {
  font-size: 12px;
  color: var(--wd-text-primary);
}

/* Bootstrap .form-check (radio/checkbox) */
.wd-page .form-check-input {
  background-color: transparent;
  border-color: var(--wd-glass-50);
}

.wd-page .form-check-input:checked {
  background-color: var(--wd-white);
  border-color: var(--wd-white);
}

.wd-page .form-check-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--wd-text-primary);
}

/* Bootstrap .btn override — reset browser default for our custom classes */
.wd-page .btn:focus-visible {
  box-shadow: 0 0 0 2px var(--wd-glass-30);
}

/* Bootstrap .card override */
.wd-page .card {
  background: var(--wd-glass-10);
  border: 0;
  border-radius: var(--wd-radius-sm);
  color: var(--wd-text-primary);
}

/* Bootstrap .alert override */
.wd-page .alert {
  background: var(--wd-black);
  border: 0.5px solid var(--wd-border-light);
  border-radius: var(--wd-radius-sm);
  color: var(--wd-text-primary);
}

/* Bootstrap .nav-tabs override */
.wd-page .nav-tabs {
  border-bottom: 0;
  gap: var(--wd-space-5);
}

.wd-page .nav-tabs .nav-link {
  font-family: var(--wd-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--wd-space-4) 0;
  background: none;
  border-radius: 0;
}

.wd-page .nav-tabs .nav-link:hover {
  color: var(--wd-text-primary);
  border-color: transparent;
}

.wd-page .nav-tabs .nav-link.active {
  color: var(--wd-text-primary);
  border-bottom-color: var(--wd-white);
  background: none;
}

/* Bootstrap .modal override */
.wd-page .modal-content {
  background: var(--wd-black);
  border: 0;
  border-radius: var(--wd-radius-lg);
  color: var(--wd-text-primary);
}



/* ============================================================
   27) UTILITY CLASSES
   ============================================================ */
.text-muted     { color: var(--wd-text-muted) !important; }
.text-underline { text-decoration: underline; }
.text-danger    { color: var(--wd-red-danger) !important; }

/* Glass card background */
.wd-card {
  background: var(--wd-glass-10);
  border-radius: var(--wd-radius-sm);
}

/* Flex gap helpers */
.wd-gap-1  { gap: var(--wd-space-1); }
.wd-gap-2  { gap: var(--wd-space-2); }
.wd-gap-3  { gap: var(--wd-space-3); }
.wd-gap-4  { gap: var(--wd-space-4); }
.wd-gap-5  { gap: var(--wd-space-5); }
.wd-gap-6  { gap: var(--wd-space-6); }
.wd-gap-7  { gap: var(--wd-space-7); }