/* mgmtOS umbrella layer for the approved Hiring compositions. It loads after
   the frozen v1 styles and changes only color, type, control shape and the
   brand cards, matching www.mgmtos.io. Layout, geometry and motion stay in the
   frozen files. White text on the brand orange is 3.7:1, so filled controls use
   the deeper --u-action (4.8:1) to keep WCAG AA at their 10 to 12 px labels. */
:root {
  --u-canvas: oklch(0.135 0.008 270);
  --u-card: oklch(0.19 0.009 270);
  --u-ink: oklch(0.93 0.004 270);
  --u-ink-2: oklch(0.68 0.008 270);
  --u-ink-3: oklch(0.56 0.008 270);
  --u-line: oklch(0.88 0.008 270 / 11%);
  --u-primary: oklch(0.62 0.185 38);
  --u-action: oklch(0.56 0.185 38);
  --u-action-hover: oklch(0.53 0.185 38);
  --u-action-ink: oklch(0.98 0.01 73);
  --u-warm: #f4a178;
  --u-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --u-ember:
    radial-gradient(70% 60% at 100% 104%, oklch(0.86 0.13 78 / 72%) 0%, transparent 70%),
    radial-gradient(110% 90% at 100% 108%, oklch(0.62 0.185 38 / 92%) 0%, transparent 72%),
    radial-gradient(160% 130% at 100% 112%, oklch(0.36 0.1 38 / 88%) 0%, transparent 78%),
    oklch(0.105 0.008 270);

  --brand-peach: var(--u-primary);
  --brand-peach-light: var(--u-warm);
  --brand-gradient: linear-gradient(90deg, var(--u-primary), var(--u-warm));
  --brand-ink: var(--u-canvas);
  --brand-paper: var(--u-ink);
  --muted: var(--u-ink-2);
  --line: var(--u-line);
  color: var(--u-ink);
  font-family: var(--u-font);
}
::selection { background: oklch(0.62 0.185 38 / 40%); color: var(--u-ink); }
#hiring, #hiring * { font-family: var(--u-font); }
:focus-visible { outline-color: var(--u-primary); }

/* System type needs less negative tracking than the Inter originals. */
#hiring h1, .journey-heading h1, .reading-scene h1, .journey-finale h1 { font-weight: 500; letter-spacing: -0.045em; }
#hiring :is(h2, h3, h4) { letter-spacing: -0.025em; }
.cv-object strong { letter-spacing: -0.035em; }

.brand-lockup { font-family: var(--u-font); font-size: 19px; letter-spacing: -0.02em; gap: 10px; color: var(--u-ink); }
.brand-lockup > img { width: 24px; height: 24px; }

.journey-button { background: var(--u-action); color: var(--u-action-ink); border-radius: 10px; font-weight: 500; }
.journey-button:hover { background: var(--u-action-hover); box-shadow: none; }
.journey-button.secondary { background: oklch(1 0 0 / 6%); color: var(--u-ink); border-color: transparent; }
.journey-button.secondary:hover { background: oklch(1 0 0 / 10%); }
.pill { border-radius: 10px; }
.journey-progress i { border-color: var(--u-line); }
.journey-progress .current i { background: var(--u-action); color: var(--u-action-ink); }

/* Peach surfaces become the umbrella's ember glow. */
.profile-portrait, .role-poster, .invitation, .cv-object {
  background: var(--u-ember);
  color: var(--u-ink);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 9%), 0 30px 70px -30px oklch(0 0 0 / 70%);
}
.profile-portrait *, .role-poster *, .invitation *, .cv-object * { color: inherit; border-color: oklch(1 0 0 / 18%); }
.cv-object { box-shadow: -20px 25px 65px oklch(0 0 0 / 55%), inset 0 0 0 1px oklch(1 0 0 / 12%); }
.journey-chip { border-color: oklch(1 0 0 / 22%); }
.poster-record span { background: linear-gradient(135deg, var(--u-warm), var(--u-primary)); color: oklch(0.2 0.02 40); }

/* The application package stays a sheet of paper, in the umbrella's cool white. */
.application-package { background: oklch(0.965 0.003 270); color: oklch(0.25 0.01 270); }

.orbit { border-color: oklch(0.62 0.185 38 / 14%); }
.reading-orb .orbit-two { border-color: oklch(0.62 0.185 38 / 30%); }
.reading-core { background: radial-gradient(oklch(0.62 0.185 38 / 22%), oklch(0.62 0.185 38 / 3%)); box-shadow: 0 0 80px oklch(0.62 0.185 38 / 20%); }
.scan-line { background: linear-gradient(90deg, transparent, var(--u-warm), transparent); box-shadow: 0 0 25px var(--u-primary); }
.reading-signals .found { border-color: oklch(0.62 0.185 38 / 45%); background: oklch(0.62 0.185 38 / 6%); }
.finale-bloom > i { border-color: oklch(0.72 0.16 50 / 45%); background: linear-gradient(oklch(0.62 0.185 38 / 3%), oklch(0.62 0.185 38 / 10%)); }

.role-options { background: var(--u-card); border-color: var(--u-line); scrollbar-color: var(--u-ink-3) var(--u-card); }
.role-options button:hover, .role-options button:focus { background: oklch(1 0 0 / 6%); }
.role-options button[aria-selected=true] { background: oklch(0.62 0.185 38 / 12%); }
.preview-bar { background: oklch(0.2 0.01 270); color: var(--u-ink-2); }
.avatar { background: oklch(1 0 0 / 7%); color: var(--u-ink); }
.file-icon { border-color: oklch(0.62 0.185 38 / 40%); }

/* Studio and staff sign-in. */
.studio-intro .pill, .apply-form .pill { background: var(--u-action); color: var(--u-action-ink); }
.studio-intro .pill:hover, .apply-form .pill:hover { background: var(--u-action-hover); color: var(--u-action-ink); }
.stat strong { letter-spacing: -0.04em; }
.candidate-row .avatar, .candidate-row:nth-child(2n) .avatar, .candidate-row:nth-child(3n) .avatar { background: oklch(1 0 0 / 7%); color: var(--u-ink); }
.candidate-row[aria-pressed=true]::before { background: var(--u-primary); }
.detail-body p { color: oklch(0.82 0.006 270); }
.detail select { background: var(--u-card); color: var(--u-ink); border-color: var(--u-line); border-radius: 8px; }
.invitation p:not(.eyebrow) { color: oklch(0.86 0.01 60); }
.invitation-symbol, .invitation-symbol::before, .invitation-symbol::after { border-color: oklch(1 0 0 / 22%); }
.invitation-symbol img { filter: brightness(0) invert(1); opacity: 0.9; }