/* ==========================================================================
   Ritoo — Bootstrap Theme Override
   --------------------------------------------------------------------------
   This file defines Ritoo's own design tokens (--rit-*) and remaps the
   official Bootstrap CSS variables (--bs-*) onto them, re-theming the whole
   framework. Load AFTER the official bootstrap.min.css so these win.
   Shared by: institucional / dashboard / whm.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Ritoo design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces & ink */
  --rit-bg:           #F6F3EE;   /* warm off-white page background     */
  --rit-bg-2:         #FBFAF7;   /* slightly lighter panel background  */
  --rit-surface:      #FFFFFF;   /* cards                              */
  --rit-ink:          #15191E;   /* primary text (warm near-black)     */
  --rit-ink-soft:     #3A4047;   /* secondary text                     */
  --rit-muted:        #6B7178;   /* tertiary / captions                */

  /* Brand */
  --rit-navy:         #0F2233;   /* deep navy — primary                */
  --rit-navy-700:     #14304A;
  --rit-navy-deep:    #0A1825;   /* darkest navy for dark sections     */
  --rit-graphite:     #272D35;   /* graphite                           */

  /* Accent — discreet champagne gold (low chroma, sober) */
  --rit-gold:         #BFA269;
  --rit-gold-bright:  #D2BA85;   /* gold on dark backgrounds           */
  --rit-gold-ink:     #8A6E36;   /* gold text on light backgrounds     */
  --rit-gold-soft:    rgba(191,162,105,0.14);

  /* Support — deep evergreen (used very sparingly) */
  --rit-green:        #1F4438;

  /* Lines */
  --rit-line:         rgba(15,34,51,0.10);
  --rit-line-strong:  rgba(15,34,51,0.18);
  --rit-line-on-dark: rgba(255,255,255,0.12);

  /* Shadows — soft, premium */
  --rit-shadow-sm: 0 1px 2px rgba(15,34,51,0.04), 0 1px 3px rgba(15,34,51,0.05);
  --rit-shadow:    0 4px 16px rgba(15,34,51,0.06), 0 1px 4px rgba(15,34,51,0.05);
  --rit-shadow-lg: 0 24px 60px rgba(10,24,37,0.14), 0 6px 18px rgba(10,24,37,0.08);

  /* Type */
  --rit-font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --rit-font-sans:  'Manrope', system-ui, -apple-system, sans-serif;

  /* Easing */
  --rit-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Remap Bootstrap core variables onto Ritoo tokens
   -------------------------------------------------------------------------- */
:root {
  --bs-body-bg:        var(--rit-bg);
  --bs-body-color:     var(--rit-ink);
  --bs-body-font-family: var(--rit-font-sans);
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  --bs-emphasis-color: var(--rit-ink);
  --bs-secondary-color: var(--rit-muted);
  --bs-tertiary-color:  var(--rit-muted);

  --bs-primary:        var(--rit-navy);
  --bs-primary-rgb:    15, 34, 51;
  --bs-secondary:      #5b6168;
  --bs-secondary-rgb:  91, 97, 104;
  --bs-success:        var(--rit-green);
  --bs-success-rgb:    31, 68, 56;
  --bs-light:          var(--rit-bg-2);
  --bs-light-rgb:      251, 250, 247;
  --bs-dark:           var(--rit-navy-deep);
  --bs-dark-rgb:       10, 24, 37;

  --bs-border-color:   var(--rit-line);
  --bs-border-radius:        .55rem;
  --bs-border-radius-sm:     .4rem;
  --bs-border-radius-lg:     .85rem;
  --bs-border-radius-xl:     1.1rem;
  --bs-border-radius-pill:   50rem;

  --bs-link-color:       var(--rit-navy);
  --bs-link-color-rgb:   15, 34, 51;
  --bs-link-hover-color: var(--rit-gold-ink);

  --bs-heading-color:  var(--rit-navy);
  --bs-heading-font-family: var(--rit-font-serif);

  --bs-font-sans-serif: var(--rit-font-sans);

  --bs-focus-ring-color: rgba(191,162,105,0.35);
}

/* --------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.002em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--rit-font-serif);
  color: var(--rit-navy);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}

p { text-wrap: pretty; }

.fw-medium { font-weight: 500 !important; }

/* Display heading helper — large premium serif */
.rit-display {
  font-family: var(--rit-font-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--rit-navy);
}

/* Eyebrow / kicker label */
.rit-eyebrow {
  font-family: var(--rit-font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rit-gold-ink);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.rit-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--rit-gold);
  display: inline-block;
}
.rit-eyebrow.is-center::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--rit-gold);
  display: inline-block;
}
.rit-eyebrow.on-dark { color: var(--rit-gold-bright); }

.rit-serif-italic { font-style: italic; font-weight: 400; }

/* Lead text */
.lead {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--rit-ink-soft);
  line-height: 1.62;
}

.text-muted-2 { color: var(--rit-muted) !important; }
.text-gold { color: var(--rit-gold-ink) !important; }

/* --------------------------------------------------------------------------
   4. Buttons — premium, restrained radius
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--rit-font-sans);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .95rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: .72rem;
  --bs-btn-border-radius: .5rem;
  letter-spacing: .005em;
  transition: background-color .25s var(--rit-ease), color .25s var(--rit-ease),
              border-color .25s var(--rit-ease), transform .25s var(--rit-ease),
              box-shadow .25s var(--rit-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--rit-navy);
  --bs-btn-border-color: var(--rit-navy);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--rit-navy-deep);
  --bs-btn-hover-border-color: var(--rit-navy-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rit-navy-deep);
  --bs-btn-active-border-color: var(--rit-navy-deep);
  --bs-btn-disabled-bg: var(--rit-navy);
  --bs-btn-disabled-border-color: var(--rit-navy);
  box-shadow: 0 1px 2px rgba(10,24,37,.18);
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(10,24,37,.20); }

.btn-outline-primary {
  --bs-btn-color: var(--rit-navy);
  --bs-btn-border-color: var(--rit-line-strong);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--rit-navy);
  --bs-btn-hover-border-color: var(--rit-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--rit-navy);
  --bs-btn-active-border-color: var(--rit-navy);
}

/* Gold accent button — used sparingly for the key CTA */
.btn-gold {
  --bs-btn-color: var(--rit-navy-deep);
  --bs-btn-bg: var(--rit-gold);
  --bs-btn-border-color: var(--rit-gold);
  --bs-btn-hover-bg: var(--rit-gold-bright);
  --bs-btn-hover-border-color: var(--rit-gold-bright);
  --bs-btn-hover-color: var(--rit-navy-deep);
  --bs-btn-active-bg: var(--rit-gold-bright);
  --bs-btn-active-border-color: var(--rit-gold-bright);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(138,110,54,.25);
}
.btn-gold:hover { box-shadow: 0 12px 26px rgba(138,110,54,.28); }

/* Ghost button on dark surfaces */
.btn-light-outline {
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--rit-line-on-dark);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: rgba(255,255,255,.4);
  --bs-btn-hover-color: #fff;
  border-width: 1px;
}

.btn-lg {
  --bs-btn-padding-x: 1.85rem;
  --bs-btn-padding-y: .9rem;
  --bs-btn-font-size: 1rem;
}

/* Quiet text link with arrow */
.rit-link {
  font-family: var(--rit-font-sans);
  font-weight: 600;
  font-size: .95rem;
  color: var(--rit-navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: gap .25s var(--rit-ease), color .25s var(--rit-ease);
}
.rit-link:hover { color: var(--rit-gold-ink); gap: .75rem; }
.rit-link .bi { font-size: .85em; }

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--rit-surface);
  --bs-card-border-color: var(--rit-line);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: 1rem;
  --bs-card-spacer-x: 1.85rem;
  --bs-card-spacer-y: 1.85rem;
  --bs-card-cap-bg: transparent;
  box-shadow: var(--rit-shadow-sm);
  transition: transform .35s var(--rit-ease), box-shadow .35s var(--rit-ease),
              border-color .35s var(--rit-ease);
}
.card-title { font-family: var(--rit-font-serif); color: var(--rit-navy); }

/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
.form-control, .form-select {
  --bs-border-color: var(--rit-line-strong);
  font-family: var(--rit-font-sans);
  border-radius: .5rem;
  padding: .72rem .9rem;
  background-color: var(--rit-surface);
  color: var(--rit-ink);
  transition: border-color .2s var(--rit-ease), box-shadow .2s var(--rit-ease);
}
.form-control:focus, .form-select:focus {
  border-color: var(--rit-gold);
  box-shadow: 0 0 0 .2rem rgba(191,162,105,.18);
}
.form-label {
  font-family: var(--rit-font-sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--rit-ink-soft);
  margin-bottom: .4rem;
}

/* --------------------------------------------------------------------------
   7. Badges & pills
   -------------------------------------------------------------------------- */
.badge { font-family: var(--rit-font-sans); font-weight: 600; letter-spacing: .02em; }

.rit-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--rit-font-sans);
  font-size: .82rem;
  font-weight: 600;
  padding: .34rem .8rem;
  border-radius: 50rem;
  border: 1px solid var(--rit-line-strong);
  color: var(--rit-ink-soft);
  background: var(--rit-surface);
}
.rit-chip .bi { font-size: .9em; color: var(--rit-gold-ink); }
.rit-chip.is-active { background: var(--rit-navy); color:#fff; border-color: var(--rit-navy); }
.rit-chip.is-active .bi { color: var(--rit-gold-bright); }

/* --------------------------------------------------------------------------
   8. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--rit-line);
  --bs-accordion-border-radius: .85rem;
  --bs-accordion-btn-color: var(--rit-navy);
  --bs-accordion-active-color: var(--rit-navy);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 1.35rem;
}
.accordion-button {
  font-family: var(--rit-font-serif);
  font-size: 1.15rem;
  font-weight: 500;
}
.accordion-button:not(.collapsed) { box-shadow: none; }

/* --------------------------------------------------------------------------
   9. Section scaffolding + scroll reveal
   -------------------------------------------------------------------------- */
.section { padding-top: 7rem; padding-bottom: 7rem; }
.section-sm { padding-top: 4.5rem; padding-bottom: 4.5rem; }

.bg-cream  { background-color: var(--rit-bg); }
.bg-surface{ background-color: var(--rit-surface); }
.bg-navy   { background-color: var(--rit-navy); color: #EAF0F6; }
.bg-navy-deep { background-color: var(--rit-navy-deep); color: #EAF0F6; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-navy-deep h1, .bg-navy-deep h2, .bg-navy-deep h3, .bg-navy-deep h4 { color: #fff; }

.hairline { height: 1px; background: var(--rit-line); border: 0; }

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--rit-ease), transform .7s var(--rit-ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

/* Motion off (Tweaks/reduced) */
.motion-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* Number ticker / index */
.rit-index {
  font-family: var(--rit-font-serif);
  font-size: .9rem;
  color: var(--rit-gold-ink);
  font-weight: 500;
}

/* Selection */
::selection { background: var(--rit-gold-soft); color: var(--rit-navy-deep); }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,34,51,.18); border-radius: 8px; border: 3px solid var(--rit-bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(15,34,51,.30); }

/* --------------------------------------------------------------------------
   Demo runtime: banner + toast + form modal
   -------------------------------------------------------------------------- */
.demo-banner { background: linear-gradient(90deg, var(--rit-navy-deep), var(--rit-navy)); color:#fff; }
.demo-banner .bar { display:flex; align-items:center; gap:.75rem; padding:.5rem 1.4rem; flex-wrap:wrap; }
.demo-banner strong { color: var(--rit-gold-bright); letter-spacing:.08em; text-transform:uppercase; font-size:.7rem; }
.demo-banner .demo-host { font-family:ui-monospace,monospace; background:rgba(255,255,255,.1); padding:.12rem .55rem; border-radius:50rem; font-size:.74rem; }
.demo-banner .demo-note { color:rgba(255,255,255,.78); font-size:.8rem; }
.demo-banner .demo-note b { color:#fff; font-weight:700; }
.demo-banner .demo-reset { margin-left:auto; background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; font-size:.76rem; font-weight:600; padding:.28rem .8rem; border-radius:50rem; cursor:pointer; transition:background-color .2s; }
.demo-banner .demo-reset:hover { background:rgba(255,255,255,.12); }
.demo-dot { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 3px rgba(52,199,89,.3); flex:0 0 auto; }

.demo-toast { position:fixed; bottom:1.6rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--rit-navy-deep); color:#fff; padding:.75rem 1.3rem; border-radius:50rem; font-size:.88rem; font-weight:600; z-index:2200; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; box-shadow:var(--rit-shadow-lg); display:flex; align-items:center; }
.demo-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.demo-toast .bi { color: var(--rit-gold-bright); }

.demo-form-modal .modal-content { border:0; border-radius:16px; box-shadow:var(--rit-shadow-lg); }
.demo-form-modal .modal-header { border-bottom:1px solid var(--rit-line); padding:1.2rem 1.5rem; }
.demo-form-modal .modal-title { font-family:var(--rit-font-serif); }
.demo-form-modal .modal-footer { border-top:1px solid var(--rit-line); }