/* =========================================================
   R2V Unified Portal — base.css
   Design tokens, resets, typography
   ========================================================= */

:root {
  /* Brand */
  --r2v-red:        #A23533;
  --r2v-red-hot:    #D52027;
  --r2v-red-soft:   #FBE9E8;
  --r2v-blue:       #0E518B;
  --r2v-blue-dark:  #083C68;
  --r2v-blue-teal:  #1483B1;
  --r2v-blue-soft:  #E7F2F9;

  /* Surfaces */
  --r2v-cream:      #FFF8F1;
  --r2v-cream-2:    #FAF1E4;
  --r2v-surface:    #FFFFFF;
  --r2v-surface-2:  #F7F4EE;
  --r2v-surface-3:  #EFE9DD;

  /* Ink */
  --r2v-ink:        #1A2536;
  --r2v-ink-soft:   #56657A;
  --r2v-ink-mute:   #8693A4;
  --r2v-border:     #E7E2DA;
  --r2v-border-2:   #D9D2C5;

  /* Semantic */
  --r2v-success:    #0EA47A;
  --r2v-warn:       #CC9711;
  --r2v-danger:     #A23533;
  --r2v-info:       #1483B1;

  /* Event categories */
  --cat-driver:     #0E518B;
  --cat-dispatch:   #765F89;
  --cat-phonebank:  #CC9711;
  --cat-outreach:   #DE40DE;
  --cat-meeting:    #1483B1;
  --cat-virtual:    #0EA47A;
  --cat-special:    #A23533;
  --cat-training:   #374151;

  /* Layout */
  --r2v-topbar-h:   64px;
  --r2v-sidebar-w:  248px;
  --r2v-radius-sm:  8px;
  --r2v-radius:     12px;
  --r2v-radius-lg:  16px;
  --r2v-radius-xl:  24px;

  /* Shadow */
  --r2v-shadow-1:   0 1px 2px rgba(14,81,139,.06), 0 8px 24px rgba(14,81,139,.06);
  --r2v-shadow-2:   0 2px 4px rgba(14,81,139,.08), 0 16px 40px rgba(14,81,139,.10);
  --r2v-shadow-pop: 0 24px 48px rgba(10,28,50,.18);

  /* Type */
  --r2v-font-sans:  'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r2v-font-head:  'Raleway', var(--r2v-font-sans);

  /* Motion */
  --r2v-ease:       cubic-bezier(.22,.61,.36,1);
  --r2v-dur:        .22s;
}

/* ----- Reset-ish ----- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--r2v-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--r2v-ink);
  background: var(--r2v-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--r2v-font-head);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--r2v-ink);
  margin: 0 0 .5rem 0;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
a { color: var(--r2v-blue); text-decoration: none; }
a:hover { color: var(--r2v-blue-dark); text-decoration: underline; }
button { font-family: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Scrollbars (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--r2v-border-2); border-radius: 99px; border: 2px solid var(--r2v-cream); }
::-webkit-scrollbar-thumb:hover { background: var(--r2v-ink-mute); }

/* ----- Splash ----- */
.r2v-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 30% 20%, #FFFBF3, var(--r2v-cream) 60%, #F1E6D2 110%);
  transition: opacity .35s var(--r2v-ease), visibility 0s linear .4s;
}
.r2v-splash[hidden] { display: none; }
.r2v-splash.is-hiding { opacity: 0; visibility: hidden; }
.r2v-splash__inner { text-align: center; padding: 24px; }
.r2v-splash__logo-img {
  width: 280px; max-width: 70vw; height: auto;
  margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 8px 20px rgba(14,81,139,.18));
  animation: r2v-splash-rise .6s var(--r2v-ease) both;
}
.r2v-splash__sub {
  color: var(--r2v-blue-dark);
  font-family: var(--r2v-font-head); font-weight: 700;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  animation: r2v-splash-rise .6s var(--r2v-ease) .15s both;
}
.r2v-splash__bar {
  width: 200px; max-width: 60vw; height: 4px;
  margin: 18px auto 0; border-radius: 4px;
  background: rgba(14,81,139,.10); overflow: hidden;
  animation: r2v-splash-rise .6s var(--r2v-ease) .3s both;
}
.r2v-splash__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--r2v-blue-teal), var(--r2v-blue), var(--r2v-red));
  border-radius: 4px;
  animation: r2v-splash-loop 1.4s var(--r2v-ease) infinite;
}
@keyframes r2v-splash-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes r2v-splash-loop {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}