/*
  Tripply365 shared design tokens.
  Canonical source of truth: src/Tripply365.Common/Design/tripply365-theme.css
  Copied as-is into each site's wwwroot/css/tripply365-theme.css - these are
  separately deployed apps with no shared static-file host, so the "single
  source" is this file plus a rule to keep the copies identical when it changes.

  Palette lifted from Tripply365.Portal.Web/wwwroot/css/site.css, which already
  matches Visa.Web's --bs-primary (#c9a227) and Hajj.Web's luxury gold accent -
  this was already the de-facto brand, just not shared anywhere.
*/

:root {
  --brand-gold: #C9A227;
  --brand-gold-light: #E3C465;
  --brand-ink: #0F2038;
  --brand-ink-deep: #0A1526;
  --brand-ink-soft: #16304F;
  --brand-surface: #F8F7F4;
  --brand-line: #E4E1D8;
  --brand-success: #1F7A4D;
  --brand-danger: #B3261E;
  --brand-warning: #B8860B;
  --brand-font: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

body {
  font-family: var(--brand-font);
}

/* Bootstrap theme bridge - only takes effect on Bootstrap 5 pages, harmless elsewhere. */
:root {
  --bs-primary: var(--brand-gold);
  --bs-primary-rgb: 201, 162, 39;
  --bs-link-color: var(--brand-ink);
  --bs-link-hover-color: var(--brand-gold);
}

.btn-primary {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #1a1a1a;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-gold-light);
  border-color: var(--brand-gold-light);
  color: #1a1a1a;
}

/* Shared navbar/footer look for the Bootstrap-based sites (Portal, Immigration, Visa). */
.tripply-navbar {
  background: #fff;
  border-bottom: 1px solid var(--brand-line);
}
.tripply-navbar .navbar-brand {
  font-weight: 700;
  color: var(--brand-ink);
}
.tripply-navbar .navbar-brand .brand-mark {
  color: var(--brand-gold);
}

.tripply-footer {
  background: var(--brand-ink-deep);
  color: #dfe3ea;
}
.tripply-footer a {
  color: #dfe3ea;
  text-decoration: none;
}
.tripply-footer a:hover {
  color: var(--brand-gold);
}
.tripply-footer .brand-mark {
  color: var(--brand-gold);
}