/* ═══════════════════════════════════════════════════════════════
   FORSIGHT DESIGN SYSTEM — forsight-design-system.css
   Extends theme-global.css with Forsight brand variables
   Include AFTER theme-global.css in all pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts: Plus Jakarta Sans (Workera-equivalent) ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Forsight Brand Tokens ── */
:root {
  /* Brand colours */
  --purple:        #6B3FA0;
  --purple-dark:   #4A2070;
  --purple-mid:    #8B5FBF;
  --purple-light:  #EDE0F5;
  --purple-xlight: #F7F0FF;

  --gold:          #E8952A;
  --gold-light:    #FEF3DC;

  --teal:          #0E7A6E;
  --teal-light:    #E0F5F2;

  --forsight-red:  #C0392B;
  --forsight-red-light: #FDEAEA;

  /* Override --blue with Forsight purple throughout product */
  --blue:          #6B3FA0;
  --blue-dark:     #4A2070;
  --blue-light:    #F7F0FF;

  /* Warm backgrounds */
  --warm-bg:       #FAF6F0;
  --warm-peach:    #FAF0E8;

  /* Typography */
  --font-primary:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ink:           #1A1A2E;
  --ink-2:         #2D2D44;
  --ink-3:         #4A4A6A; /* Darker for better visibility */
  --ink-4:         #6B6B8A; /* Darker for better visibility */

  /* Borders & surfaces */
  --border:        rgba(107,63,160,0.12);
  --panel:         #FAF6F0;
  --white:         #FFFFFF;

  /* Shadows */
  --shadow:        0 1px 4px rgba(107,63,160,0.08);
  --shadow-lg:     0 8px 32px rgba(107,63,160,0.12);
  --shadow-card:   0 4px 16px rgba(107,63,160,0.10);

  /* Sidebar Tokens (Light Mode - Cream / Purple) */
  --sidebar-bg:          #FAF6F0; /* Soft warm Cream */
  --sidebar-text:        #4A4A6A; /* Dark purple-gray text */
  --sidebar-text-hover:  #4A2070; /* Purple dark text */
  --sidebar-bg-hover:    #EDE0F5; /* Light purple highlight */
  --sidebar-border:      rgba(107,63,160,0.08);
}

/* ── Dark mode overrides (Navy and Cream) ── */
html[data-theme='dark'], :root[data-theme='dark'] {
  --blue:          #9B6FD0;
  --blue-dark:     #7B4FB0;
  --blue-light:    rgba(107,63,160,0.15);
  --purple:        #9B6FD0;
  --purple-light:  rgba(107,63,160,0.15);
  --purple-xlight: rgba(107,63,160,0.08);
  
  /* Rich Navy & Cream combination */
  --ink:           #FAF6F0; /* Soft warm Cream */
  --ink-2:         #EADEC9; /* Secondary Cream */
  --ink-3:         #B5A895; /* Muted Cream */
  --ink-4:         #7C715E; /* Dark Muted Cream */
  --border:        rgba(250, 246, 240, 0.15);
  --panel:         #0A1128; /* Deep Navy Sea Blue canvas background */
  --white:         #101F42; /* Deep Navy card surface */
  --warm-bg:       #0A1128;
  --shadow:        0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.6);

  /* Sidebar Tokens (Dark Mode) */
  --sidebar-bg:          #0A1128;
  --sidebar-text:        rgba(250, 246, 240, 0.6);
  --sidebar-text-hover:  #ffffff;
  --sidebar-bg-hover:    rgba(250, 246, 240, 0.08);
  --sidebar-border:      rgba(250, 246, 240, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-primary) !important;
  background: var(--warm-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════
   FORSIGHT BUTTON SYSTEM
   All .btn-primary → purple filled
   All .btn-ghost   → outline (unchanged)
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
  background: var(--purple) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.btn-primary:hover, .btn.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover {
  background: var(--purple-dark) !important;
  transform: translateY(-1px) !important;
}

.btn-ghost,
.btn.btn-ghost,
button.btn-ghost,
a.btn-ghost {
  background: transparent !important;
  color: var(--purple) !important;
  border: 1.5px solid rgba(107,63,160,0.3) !important;
  border-radius: 9px !important;
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
.btn-ghost:hover, .btn.btn-ghost:hover, button.btn-ghost:hover {
  border-color: var(--purple) !important;
  background: var(--purple-xlight) !important;
}

.btn-secondary,
.btn.btn-secondary {
  background: var(--purple-xlight) !important;
  color: var(--purple) !important;
  border: 1px solid var(--purple-light) !important;
  border-radius: 9px !important;
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
}

/* ══════════════════════════════════════════════════════════════
   NAV — All pages
   ══════════════════════════════════════════════════════════════ */
.nav {
  background: rgba(250,246,240,0.95) !important;
  border-bottom: 0.5px solid rgba(107,63,160,0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-family: var(--font-primary) !important;
}
html[data-theme='dark'] .nav {
  background: rgba(15,8,32,0.95) !important;
  border-bottom-color: rgba(107,63,160,0.2) !important;
}
.nav-logo, .nav a.nav-logo {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 17px !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.nav-logo-dot, .logo-dot, .sb-logo-dot {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: var(--purple) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.nav-logo-dot::after { content: 'F'; }

.nav-links a, .nav .nav-links a {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--ink-3) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.nav-links a:hover { color: var(--ink) !important; }

/* ══════════════════════════════════════════════════════════════
   CARDS & KPIs
   ══════════════════════════════════════════════════════════════ */
.card, .kpi {
  background: var(--white) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
  font-family: var(--font-primary) !important;
}
.card:hover { box-shadow: var(--shadow-lg) !important; }

.kpi-label {
  font-family: var(--font-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--ink-3) !important;
}

/* ══════════════════════════════════════════════════════════════
   PILL BADGES — Updated for growth language
   ══════════════════════════════════════════════════════════════ */
.pill-red {
  background: var(--purple-xlight) !important;
  color: var(--purple) !important;
  border-color: var(--purple-light) !important;
}
.pill-amber {
  background: var(--gold-light) !important;
  color: var(--gold) !important;
  border-color: rgba(232,149,42,0.2) !important;
}
.pill-green {
  background: #DFF2EB !important;
  color: #2D9B6F !important;
  border-color: rgba(45,155,111,0.2) !important;
}
.pill-dot { background: currentColor !important; }

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — Admin pages
   ══════════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
}
.sb-logo {
  border-bottom: 0.5px solid var(--sidebar-border) !important;
  padding: 20px 16px !important;
}
.sb-logo a {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  letter-spacing: -0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.sb-logo-dot {
  background: var(--purple) !important;
  width: 26px !important;
  height: 26px !important;
}
.sb-link {
  color: var(--sidebar-text) !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
}
.sb-link:hover { 
  color: var(--sidebar-text-hover) !important; 
  background: var(--sidebar-bg-hover) !important; 
}
.sb-link.active { 
  color: #fff !important; 
  background: var(--purple) !important; 
}

/* ══════════════════════════════════════════════════════════════
   TOPBAR — Admin pages
   ══════════════════════════════════════════════════════════════ */
.topbar, .topbar-wrap {
  background: rgba(250,246,240,0.95) !important;
  border-bottom: 0.5px solid var(--border) !important;
  backdrop-filter: blur(10px) !important;
  font-family: var(--font-primary) !important;
}
html[data-theme='dark'] .topbar, html[data-theme='dark'] .topbar-wrap {
  background: rgba(15,8,32,0.95) !important;
}

/* ══════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ══════════════════════════════════════════════════════════════ */
input, select, textarea {
  font-family: var(--font-primary) !important;
  border-radius: 8px !important;
  border-color: var(--border) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(107,63,160,0.12) !important;
}

/* ══════════════════════════════════════════════════════════════
   SCORE RING — Override blue with purple
   ══════════════════════════════════════════════════════════════ */
#ringFill { stroke: var(--purple) !important; }
.kpi-bar { background: var(--purple) !important; }
.score-ring-fill { stroke: var(--purple) !important; }

/* ══════════════════════════════════════════════════════════════
   ONBOARDING — Card options & AI options
   ══════════════════════════════════════════════════════════════ */
.card-opt {
  border-radius: 12px !important;
  border: 1.5px solid var(--border) !important;
  background: var(--white) !important;
  font-family: var(--font-primary) !important;
  transition: all 0.15s !important;
}
.card-opt:hover, .card-opt.selected {
  border-color: var(--purple) !important;
  background: var(--purple-xlight) !important;
}
.card-opt-title {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
}
.ai-opt {
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: var(--font-primary) !important;
  transition: all 0.15s !important;
}
.ai-opt:hover, .ai-opt.selected {
  border-color: var(--purple) !important;
  background: var(--purple-xlight) !important;
}
.ai-opt-dot {
  width: 16px !important; height: 16px !important;
  border: 2px solid var(--border) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}
.ai-opt.selected .ai-opt-dot {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
}
.screen-title {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.step-counter {
  font-family: var(--font-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--purple) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 10px !important;
}
.upload-area:hover, .upload-area.dragover {
  border-color: var(--purple) !important;
  background: var(--purple-xlight) !important;
}
.uploaded-file {
  background: var(--purple-xlight) !important;
  border-color: var(--purple-light) !important;
}

/* ══════════════════════════════════════════════════════════════
   PRIVACY NOTICE — Onboarding
   ══════════════════════════════════════════════════════════════ */
.forsight-privacy-notice {
  background: var(--purple-xlight);
  border: 1px solid var(--purple-light);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.forsight-privacy-notice-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(107,63,160,0.15);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  color: var(--purple); font-weight: 700; font-size: 12px;
}
.forsight-privacy-notice-title {
  font-size: 13px; font-weight: 600; color: var(--purple); margin-bottom: 4px;
  font-family: var(--font-primary);
}
.forsight-privacy-notice-body {
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
  font-family: var(--font-primary);
}

/* ══════════════════════════════════════════════════════════════
   SCORE PAGE — Growth plan card
   ══════════════════════════════════════════════════════════════ */
.hdr h1 {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* ══════════════════════════════════════════════════════════════
   REPORT PAGE — Co-pilot floating button
   ══════════════════════════════════════════════════════════════ */
#sentinelFloatingBtn {
  background: linear-gradient(135deg, var(--purple), var(--purple-dark)) !important;
  box-shadow: 0 4px 14px rgba(107,63,160,0.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   JOIN PAGE — Invite card
   ══════════════════════════════════════════════════════════════ */
.join-card, .card.join-card {
  border-radius: 18px !important;
  box-shadow: 0 12px 48px rgba(107,63,160,0.12) !important;
  font-family: var(--font-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   TABLES — Admin dashboard
   ══════════════════════════════════════════════════════════════ */
th {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink-3) !important;
  background: var(--panel) !important;
}
td { font-family: var(--font-primary) !important; }

/* ══════════════════════════════════════════════════════════════
   MODAL — Login / Demo
   ══════════════════════════════════════════════════════════════ */
.modal {
  border-radius: 18px !important;
  font-family: var(--font-primary) !important;
}
.modal-logo {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.modal-title {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* ══════════════════════════════════════════════════════════════
   INDEX — Hero section override
   ══════════════════════════════════════════════════════════════ */
body.page-index {
  background: linear-gradient(140deg, #FAF0E8 0%, #F3E8FA 50%, #E8F0FA 100%) !important;
  background-attachment: fixed !important;
}
.hero-headline {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}
.hero-headline span { color: var(--purple) !important; }
.hero-sub {
  font-family: var(--font-primary) !important;
  color: var(--ink-3) !important;
}
.hero-eyebrow {
  font-family: var(--font-primary) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--purple) !important;
  background: var(--purple-xlight) !important;
  border: 0.5px solid var(--purple-light) !important;
  border-radius: 100px !important;
  padding: 5px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 24px !important;
}
.hero-eyebrow-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--purple) !important;
  display: inline-block !important;
}
/* Hero mockup URL bar — update from old domain */
.mockup-bar span { display: none !important; }
.mockup-bar::after {
  content: 'app.forsight.io/dashboard';
  font-size: 11px;
  color: var(--ink-4);
  margin-left: 12px;
  font-family: var(--font-primary);
}

/* ══════════════════════════════════════════════════════════════
   SEGMENT / FEATURE CARDS — Index page
   ══════════════════════════════════════════════════════════════ */
.seg-card, .feature-card, .price-card {
  border-radius: 14px !important;
  border: 0.5px solid var(--border) !important;
  font-family: var(--font-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   FORSIGHT TAGLINE BANNER — Footer
   ══════════════════════════════════════════════════════════════ */
.footer-bottom {
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  color: var(--ink-3) !important;
}

/* ══════════════════════════════════════════════════════════════
   TOOL PROFICIENCY BADGES — Onboarding screen 2
   ══════════════════════════════════════════════════════════════ */
.tool-badge.selected, .tool-chip.selected {
  background: var(--purple) !important;
  border-color: var(--purple) !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════
   ANALYSIS STEPS — Onboarding loading states
   ══════════════════════════════════════════════════════════════ */
.analyse-step-dot.active {
  background: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(107,63,160,0.2) !important;
}
.analyse-step-dot.done {
  background: #2D9B6F !important;
}

/* ══════════════════════════════════════════════════════════════
   AVATARS
   ══════════════════════════════════════════════════════════════ */
.avatar {
  background: linear-gradient(135deg, var(--purple), var(--purple-mid)) !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   SCORE PAGE — HRMS sync badge
   ══════════════════════════════════════════════════════════════ */
.forsight-hrms-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--purple-xlight);
  border: 1px solid var(--purple-light);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--purple);
  font-family: var(--font-primary);
  margin-bottom: 16px;
}
.forsight-hrms-sync-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2D9B6F;
}

/* ══════════════════════════════════════════════════════════════
   SMOOTH TRANSITIONS (preserve from theme-global)
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}