/* =========================================================
   Moventum design tokens
   One source for colour, type, spacing and status styles.
   Use these in every surface: website, candidate, company, HR.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;600&display=swap");

:root {
  /* ---------- Brand ---------- */
  --mv-sky: #40BFF0;            /* gradient start */
  --mv-teal: #5AC6C9;           /* gradient middle */
  --mv-mint: #78CC9C;           /* gradient end */
  --mv-gradient: linear-gradient(90deg, #40BFF0, #5AC6C9 50%, #78CC9C);
  --mv-wordmark: #295674;       /* logo wordmark only */

  /* ---------- Dark surfaces ---------- */
  --mv-night: #050E19;          /* dark page sections */
  --mv-navy: #071423;           /* sidebars, dark cards */
  --mv-card-dark: rgba(13, 30, 48, 0.82);
  --mv-deep-blue: #1D4D72;      /* featured / highlighted card */
  --mv-deep-blue-2: #0C2740;    /* featured card gradient end */

  /* ---------- Light surfaces ---------- */
  --mv-white: #FFFFFF;
  --mv-mist: #F4F7FA;           /* app workspace background */
  --mv-ice: #E2EDF4;            /* callouts, active nav (light) */
  --mv-line: #DCE5EC;           /* borders */
  --mv-line-strong: #B9CCDA;    /* input borders */

  /* ---------- Text ---------- */
  --mv-ink: #0C1B2A;            /* main text on light */
  --mv-ink-2: #3E4F60;          /* body text on light */
  --mv-slate: #556677;          /* secondary text on light (4.5:1+) */
  --mv-light-muted: #5A6B7B;    /* light-weight half of headlines */
  --mv-on-dark: #F3F7FA;
  --mv-on-dark-2: #A9BBCA;      /* body text on dark */
  --mv-on-dark-3: #8EA3B5;      /* captions on dark */

  /* ---------- Actions ---------- */
  --mv-primary: #1C6A96;        /* primary button on light */
  --mv-primary-hover: #0F4C6E;
  --mv-primary-dark: #63CDF4;   /* primary button on dark (text #04121F) */
  --mv-candidate: #8BD8AC;      /* candidate CTA on dark (text #062016) */
  --mv-approve: #1D6B42;        /* final approve only */
  --mv-danger: #A1303A;
  --mv-focus: 0 0 0 3px rgba(64, 191, 240, 0.35);

  /* ---------- Icon accent dot ---------- */
  --mv-icon-dot: #2BA3DB;       /* on light. Use #63CDF4 on dark */

  /* ---------- Status badges (bg / text) ----------
     Every status also has its own shape: dot, ring, star, tick or cross,
     so colour is never the only signal. */
  --mv-st-neutral-bg: #E8EEF3;  --mv-st-neutral: #3C4D5E;   /* Applied, Draft */
  --mv-st-info-bg: #E1F1FB;     --mv-st-info: #135C85;      /* In review */
  --mv-st-star-bg: #FFF1CF;     --mv-st-star: #7A5200;      /* Interested */
  --mv-st-active-bg: #DDF4F4;   --mv-st-active: #0F5C5E;    /* Interviewing */
  --mv-st-wait-bg: #FCEFD3;     --mv-st-wait: #85570A;      /* Pending, Waiting */
  --mv-st-ok-bg: #DCF2E4;       --mv-st-ok: #1D6B42;        /* Approved, Accepted */
  --mv-st-bad-bg: #FBE3E4;      --mv-st-bad: #A1303A;       /* Rejected, No-show */

  /* ---------- Type ---------- */
  --mv-font: "IBM Plex Sans", system-ui, sans-serif;
  --mv-font-ar: "IBM Plex Sans Arabic", "IBM Plex Sans", sans-serif;
  --mv-fs-display: clamp(44px, 5.6vw, 80px);   /* weight 300 + 700 */
  --mv-fs-h2: clamp(32px, 3.6vw, 52px);
  --mv-fs-h3: 22px;
  --mv-fs-body-lg: 19px;
  --mv-fs-body: 16px;
  --mv-fs-ui: 15px;                            /* portal body */
  --mv-fs-small: 14px;
  --mv-fs-caption: 13px;
  --mv-fs-eyebrow: 13px;                       /* uppercase, letter-spacing 0.3em */
  --mv-lh-tight: 1.05;
  --mv-lh-body: 1.6;

  /* ---------- Spacing (4 px base) ---------- */
  --mv-s-1: 4px;  --mv-s-2: 8px;  --mv-s-3: 12px; --mv-s-4: 16px;
  --mv-s-5: 20px; --mv-s-6: 24px; --mv-s-8: 32px; --mv-s-10: 40px;
  --mv-s-14: 56px; --mv-s-20: 80px; --mv-s-28: 112px;  /* section padding */
  --mv-container: 1240px;

  /* ---------- Radius ---------- */
  --mv-r-sm: 9px;     /* small buttons, chips */
  --mv-r-md: 12px;    /* buttons, inputs */
  --mv-r-lg: 16px;    /* cards */
  --mv-r-xl: 20px;    /* large panels */
  --mv-r-pill: 999px; /* badges */

  /* ---------- Shadows ---------- */
  --mv-shadow-card: 0 24px 48px -32px rgba(12, 40, 64, 0.45);
  --mv-shadow-pop: 0 40px 80px -30px rgba(12, 40, 64, 0.35);
  --mv-shadow-drawer: -30px 0 60px -20px rgba(0, 0, 0, 0.4);

  /* ---------- Sizes ---------- */
  --mv-hit: 44px;           /* minimum touch target */
  --mv-sidebar: 248px;
  --mv-topbar: 72px;
}

/* ---------- Ready-made helpers ---------- */

.mv-eyebrow { font-size: var(--mv-fs-eyebrow); letter-spacing: 0.3em; font-weight: 600; text-transform: uppercase; }

.mv-label {               /* section label with the square bullet */
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: var(--mv-primary);
}
.mv-label::before { content: ""; width: 10px; height: 10px; background: currentColor; }
.mv-dark .mv-label { color: var(--mv-primary-dark); }

.mv-headline { font-size: var(--mv-fs-h2); line-height: 1.1; letter-spacing: -0.015em; font-weight: 300; color: var(--mv-light-muted); }
.mv-headline b { font-weight: 700; color: var(--mv-ink); }
.mv-dark .mv-headline { color: #B9CCDA; }
.mv-dark .mv-headline b { color: #FFFFFF; }

.mv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--mv-hit); padding: 0 20px; border-radius: var(--mv-r-md);
  font: 600 var(--mv-fs-ui) var(--mv-font); border: 0; cursor: pointer; text-decoration: none;
}
.mv-btn--primary { background: var(--mv-primary); color: #FFFFFF; }
.mv-btn--primary:hover { background: var(--mv-primary-hover); }
.mv-btn--secondary { background: #FFFFFF; color: var(--mv-ink); border: 1px solid var(--mv-line-strong); }
.mv-btn--danger { background: #FFFFFF; color: var(--mv-danger); border: 1px solid #E6B5B9; }
.mv-btn--approve { background: var(--mv-approve); color: #FFFFFF; }
.mv-btn--on-dark { background: var(--mv-primary-dark); color: #04121F; }
.mv-btn:focus-visible { outline: none; box-shadow: var(--mv-focus); }

.mv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--mv-r-pill); font-size: 13px; font-weight: 600; }
.mv-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mv-badge--neutral { background: var(--mv-st-neutral-bg); color: var(--mv-st-neutral); }
.mv-badge--info    { background: var(--mv-st-info-bg);    color: var(--mv-st-info); }
.mv-badge--active  { background: var(--mv-st-active-bg);  color: var(--mv-st-active); }
.mv-badge--wait    { background: var(--mv-st-wait-bg);    color: var(--mv-st-wait); }
.mv-badge--wait::before { background: transparent; border: 2px solid currentColor; }
.mv-badge--ok      { background: var(--mv-st-ok-bg);      color: var(--mv-st-ok); }
.mv-badge--bad     { background: var(--mv-st-bad-bg);     color: var(--mv-st-bad); }
.mv-badge--star    { background: var(--mv-st-star-bg);    color: var(--mv-st-star); }

.mv-input {
  width: 100%; min-height: 46px; padding: 0 14px; border-radius: var(--mv-r-md);
  border: 1px solid var(--mv-line-strong); font: var(--mv-fs-ui) var(--mv-font); color: var(--mv-ink); background: #FFFFFF;
}
.mv-input:focus { outline: none; border-color: var(--mv-sky); box-shadow: var(--mv-focus); }

.mv-card { background: #FFFFFF; border: 1px solid var(--mv-line); border-radius: var(--mv-r-lg); }
.mv-card--dark { background: var(--mv-card-dark); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--mv-r-lg); color: var(--mv-on-dark); }
.mv-card--featured { background: linear-gradient(160deg, var(--mv-deep-blue), var(--mv-deep-blue-2)); color: #FFFFFF; border-radius: var(--mv-r-lg); }

/* Glow used on dark sections. Place one or two per section, never everywhere. */
.mv-glow-left  { background: radial-gradient(60% 90% at -8% 60%, rgba(64,191,240,.42), transparent 60%), radial-gradient(40% 60% at -2% 95%, rgba(120,204,156,.38), transparent 60%), var(--mv-night); }
.mv-glow-right { background: radial-gradient(45% 70% at 100% 10%, rgba(120,204,156,.40), transparent 65%), radial-gradient(40% 60% at 92% 85%, rgba(64,191,240,.38), transparent 65%), var(--mv-night); }