/* RevvHire theme — the Revv Growth brand design system.
   Single source of every brand colour. Self-contained on purpose: the
   standalone pages (login, landing, interview landing, invalid-link) load
   this file without design-system.css, so nothing here may reference an
   --rh-* variable. design-system.css aliases its --rh-* tokens to these. */

:root {
  /* Brand */
  --revv-primary: #4E1BB6;
  --revv-primary-dark: #3B1390;
  --revv-primary-soft: #EDE7FF;
  --revv-violet: #7C5CE6;        /* only so "Evaluated" stays distinct from "Interview" */
  --revv-violet-soft: #EEE9FD;
  --revv-violet-text: #5B3BCF;
  --revv-pink: #CE2A79;          /* accent: eyebrows, alerts, counts — never primary buttons */
  --revv-pink-soft: #FDEEF5;
  --revv-pink-border: #F6C9DF;
  --revv-pink-text: #8E1A52;
  --revv-black: #0D0B12;
  --revv-black-2: #1A1626;

  /* Surfaces */
  --revv-bg: #FBF9FF;
  --revv-surface: #FFFFFF;
  --revv-surface-tint: #F8F5FF;
  --revv-lavender: #F4F0FF;
  --revv-lavender-deep: #E8E1FB;
  --revv-border: #E8E1FB;
  --revv-muted-bg: #F0ECF8;
  --revv-grid: #EFEAFB;

  /* Text */
  --revv-text: #0D0B12;
  --revv-text-muted: #5E5873;
  --revv-text-faint: #8F89A3;

  /* Semantic — restrained, only for real states */
  --revv-success: #1F9D6A;
  --revv-success-soft: #E3F5EC;
  --revv-success-text: #0F6B47;
  --revv-warning: #D98E04;
  --revv-warning-soft: #FFF4DB;
  --revv-warning-text: #8A5A00;
  --revv-error: #D64545;
  --revv-error-soft: #FDE8E8;
  --revv-error-soft-2: #FBD5D5;
  --revv-error-text: #9B2C2C;

  /* AI score (green / amber / red only where the number means it) */
  --revv-score-high: var(--revv-success);
  --revv-score-mid: var(--revv-warning);
  --revv-score-low: var(--revv-error);
  --revv-score-none: #B4AEC8;

  /* Pipeline stages — one definition shared by Jinja inline styles and the
     Chart.js constants in base.html */
  --revv-stage-pending: #B4AEC8;
  --revv-stage-evaluated: var(--revv-violet);
  --revv-stage-passed: var(--revv-success);
  --revv-stage-interview: var(--revv-primary);
  --revv-stage-hired: #0F7B55;
  --revv-stage-rejected: var(--revv-error);

  /* Shape, depth, focus */
  --revv-radius-card: 8px;
  --revv-radius-btn: 8px;
  --revv-radius-input: 8px;
  --revv-shadow-sm: 0 1px 2px rgba(31, 14, 74, .05);
  --revv-shadow-md: 0 6px 18px rgba(31, 14, 74, .08);
  --revv-shadow-lg: 0 18px 44px rgba(31, 14, 74, .14);
  --revv-focus: 0 0 0 3px rgba(78, 27, 182, .18);
}

/* ── Eyebrow label (pink, uppercase — the deck's section marker) ── */
.rh-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--revv-pink); }
.rh-eyebrow-muted { color: rgba(255, 255, 255, .6); }

/* ── Tinted cards (use with .rh-card for radius/padding/border) ── */
.rh-card-lavender { background: var(--revv-lavender) !important; border-color: var(--revv-lavender-deep) !important; box-shadow: none !important; }
.rh-card-lavender .rh-kpi-icon { background: var(--revv-primary); color: #fff; }

.rh-card-purple { background: var(--revv-primary) !important; border-color: var(--revv-primary) !important; color: #fff; box-shadow: var(--revv-shadow-md) !important; }
/* .rh-card.rh-card-* (3 classes) so these beat design-system.css's
   ".rh-kpi .rh-kpi-label" / ".rh-kpi-compact .rh-kpi-label" grey text,
   which loads later and would otherwise win the tie. */
.rh-card.rh-card-purple .rh-kpi-label, .rh-card.rh-card-purple .rh-meta, .rh-card.rh-card-purple .rh-label { color: rgba(255, 255, 255, .9); }
.rh-card.rh-card-purple .rh-kpi-hint, .rh-card.rh-card-purple .rh-page-subtitle { color: rgba(255, 255, 255, .78); }
.rh-card.rh-card-purple .rh-kpi-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.rh-card.rh-card-purple .rh-kpi-value, .rh-card.rh-card-purple .rh-kpi-value span { color: #fff; }

.rh-card-black { position: relative; isolation: isolate; overflow: hidden; background: var(--revv-black) !important; border-color: var(--revv-black) !important; color: #fff; box-shadow: var(--revv-shadow-md) !important; }
/* Same grid + purple/pink glow as the login panel (.rh-hero-dark), kept
   behind the card content. */
.rh-card-black::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; }
.rh-card-black::after { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(30px);
  background: radial-gradient(45% 40% at 12% 8%, rgba(78, 27, 182, .55), transparent 70%),
              radial-gradient(40% 38% at 92% 96%, rgba(206, 42, 121, .35), transparent 70%); }
.rh-card.rh-card-black .rh-kpi-label, .rh-card.rh-card-black .rh-label { color: rgba(255, 255, 255, .78); }
.rh-card.rh-card-black .rh-kpi-hint, .rh-card.rh-card-black .rh-meta, .rh-card.rh-card-black .rh-card-header .rh-meta { color: rgba(255, 255, 255, .68); }
.rh-card.rh-card-black .rh-kpi-value, .rh-card.rh-card-black .rh-stat { color: var(--revv-lavender); }
.rh-card-black .rh-card-header { border-bottom-color: rgba(255, 255, 255, .1); }
.rh-card-black .rh-section-title, .rh-card-black .rh-card-title { color: #fff; }
.rh-card-black .rh-kpi-icon { background: rgba(255, 255, 255, .1); color: var(--revv-lavender); }
.rh-card-black .rh-ring > div { background: var(--revv-black); }
.rh-card-black .rh-link { color: var(--revv-lavender); }
.rh-card-black .rh-badge-success { background: rgba(31, 157, 106, .22); color: #8FE0BE; }
.rh-card-black .rh-avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.rh-card-black .rh-progress { background: rgba(255, 255, 255, .12); }

/* ── Icon chips (purple circle, white icon) ── */
.rh-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--revv-primary); color: #fff; flex-shrink: 0; }
.rh-icon-chip svg { width: 18px; height: 18px; stroke-width: 2; }
.rh-icon-chip-soft { background: var(--revv-lavender); color: var(--revv-primary); }
.rh-icon-chip-lg { width: 56px; height: 56px; }
.rh-icon-chip-lg svg { width: 26px; height: 26px; }

/* ── Numbered step circle ── */
.rh-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--revv-primary); color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }

/* ── Alerts ── */
.rh-alert { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--revv-radius-card); border: 1px solid transparent; font-size: 14.5px; line-height: 1.55; }
.rh-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.rh-alert h4, .rh-alert strong { font-size: 15px; font-weight: 700; }
.rh-alert-pink { background: var(--revv-pink-soft); border-color: var(--revv-pink-border); color: var(--revv-pink-text); }
.rh-alert-pink svg, .rh-alert-pink h4 { color: var(--revv-pink); }
.rh-alert-lavender { background: var(--revv-lavender); border-color: var(--revv-lavender-deep); color: var(--revv-text); }
.rh-alert-lavender svg, .rh-alert-lavender h4 { color: var(--revv-primary); }

/* ── Dark hero (deck cover): black, faint grid, purple + pink glow ── */
.rh-hero-dark { position: relative; isolation: isolate; background: var(--revv-black); color: #fff; overflow: hidden; }
.rh-hero-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; }
.rh-hero-dark::after { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 45% at 18% 20%, rgba(78, 27, 182, .55), transparent 70%),
              radial-gradient(35% 40% at 88% 85%, rgba(206, 42, 121, .35), transparent 70%); filter: blur(30px); }
.rh-hero-dark > * { position: relative; }
.rh-hero-dark .rh-hero-highlight { color: #C9B8FF; }

/* ── Chat / avatar extras ── */
.rh-chat-bubble.error { background: var(--revv-pink-soft) !important; border-color: var(--revv-pink-border) !important; color: var(--revv-pink-text); }
.rh-avatar-pink { background: var(--revv-pink) !important; color: #fff; }