/* Talnt Design System v1.1 — 2026-10-17
   Brand palette overlays Mekari-compatible component tokens, without changing
   layout or semantic success/danger colors. Keep this file LAST in page CSS. */
:root {
  /* Canonical Talnt v1.0 brand */
  --color-primary: #082755; /* Deep Navy: logo, headings */
  --color-secondary: #0768EB; /* Action Blue: interactive */
  --color-tertiary: #14A7FF; /* Sky Blue: decorative and progress */
  --color-accent: #FF9F19; /* achievement and featured content */
  --color-heading: var(--color-primary);
  --color-text: #0F172A;
  --color-text-muted: #64748B;
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-action: var(--color-secondary);
  --color-action-hover: #0558C7;
  --color-focus: var(--color-secondary);
  --color-selected-bg: #EFF6FF;
  --color-info-bg: #EAF8FF;
  --color-accent-bg: #FFF3DF;
  --color-on-accent: var(--color-primary);

  /* Existing Mekari-interface variable aliases — semantics, not Mekari branding */
  --mk-colors-background: var(--color-background);
  --mk-colors-dark: var(--color-text);
  --mk-colors-gray-25: var(--color-background);
  --mk-colors-gray-50: #F1F5F9;
  --mk-colors-gray-100: var(--color-border);
  --mk-colors-gray-400: #78879B;
  --mk-colors-gray-600: var(--color-text-muted);
  --mk-colors-lightBlue: var(--color-selected-bg);
  --mk-colors-blue-50: var(--color-selected-bg);
  --mk-colors-blue-100: #D6E9FF;
  --mk-colors-blue-400: var(--color-action);
  --mk-colors-blue-500: var(--color-action);
  --mk-colors-blue-700: var(--color-action-hover);
  --mk-colors-blue-800: var(--color-primary);
  --mk-colors-ice-50: var(--color-info-bg);
  --mk-colors-ice-100: #C9EFFF;
  --mk-colors-orange-50: var(--color-accent-bg);
  --mk-colors-orange-400: var(--color-accent);
  --mk-colors-orange-500: #D97900;
  --mk-colors-orange-700: #8A5200;
  --mk-shadows-outline: 0 0 0 3px rgba(7,104,235,.15);
  --mk-shadows-outline-tab: 0 0 0 2px rgba(7,104,235,.15);
  --mk-shadows-outer: 0 0 0 3px rgba(7,104,235,.15);

  /* Existing application semantic slots */
  --blue: var(--color-action);
  --blue-2: var(--color-action);
  --blue-dark: var(--color-action-hover);
  --navy: var(--color-primary);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --soft: var(--color-background);
  --soft-blue: var(--color-selected-bg);
  --talnt-text: var(--color-text);
  --talnt-muted: var(--color-text-muted);
  --talnt-border: var(--color-border);
  --talnt-canvas: var(--color-background);
  --talnt-surface: var(--color-surface);
  --talnt-primary: var(--color-action);
  --talnt-nav-active: var(--color-action);
  --talnt-nav-active-bg: var(--color-selected-bg);
  --talnt-nav-idle: var(--color-text-muted);
  --talnt-nav-idle-icon: #78879B;
  --px-btn-primary: var(--color-action);
  --px-btn-primary-hover: var(--color-action-hover);
  --px-btn-focus: var(--color-focus);
  --px-btn-ink: var(--color-text);
  --px-btn-border: var(--color-border);
}
/* Brand identity, typography and focus state */
:where(body, .jf-admin-body){ color:var(--color-text); }
.site-header .brand, .jf-admin-header .jf-admin-brand, .site-footer .brand, .site-footer .footer-brand{color:var(--color-primary);}
.jf-admin-header .jf-admin-brandmark{background:var(--color-primary);color:#fff;}
:where(h1,h2,h3,h4,h5,h6){color:var(--color-heading);}
.jf-admin-main > h1, .jf-admin-main .ac-heading h1, .jf-settings-page .jf-settings-heading h1{color:var(--color-heading);}
:where(button,input,textarea,select) { accent-color:var(--color-action); }
:where(input,select,textarea,[role="combobox"]):focus-visible { outline-color:var(--color-focus); }
:where(a,button,[role="button"],[tabindex]):focus-visible {outline-color:var(--color-focus);}
:where(.desktop-nav a.active, .desktop-nav a[aria-current="page"], .mobile-nav a.active, .jf-admin-sidebar a.active, .jf-admin-sidebar a[aria-current="page"], .jf-dash-sidebar a.active, .jf-settings-sidebar a.active) {color:var(--color-action);}
/* Navy identity / primary button hierarchy is intentional */
:where(.site-footer,.jf-admin-brand) :is(h2,h3,h4){color:var(--color-primary);}
:where(.brand-chip,.job-featured-tag,.featured-badge,.job-badge-featured,.achievement-badge,.talnt-accent,.badge-featured){background-color:var(--color-accent);color:var(--color-on-accent);}
/* For regular text on white use Action Blue; Sky Blue is intentionally decorative only. */
:where(.talnt-sky-decoration,.talnt-highlight-decoration){color:var(--color-tertiary);}
:where(.talnt-sky-surface,.talnt-progress-indicator){background-color:var(--color-tertiary);}
:where(.talnt-accent-soft){background-color:var(--color-accent-bg);color:var(--color-on-accent);}
/* Sky Blue fills indicate progress, while tracks remain neutral. */
.system-progress > span, .ra-progress > span { background:var(--color-tertiary); }
/* Warning is semantically distinct from achievement orange. */
.px-banner--warning{--px-bg:var(--color-accent-bg);--px-icon:#8A5200;--px-border:#EAB96C;}
/* Preserve darker text for contrast on orange badges. */
.brand-chip{background:var(--color-accent)!important;color:var(--color-on-accent)!important;}
/* The canvas is cool white; cards / navigation keep their own white surfaces. */
body:not(.login-body):not(.register-body){background:var(--color-background);}
.career26{background:var(--color-background);}
/* Responsive layouts and component sizing remain unchanged. */


/* ================================================================
   TALNT V1.1 — APPLIED COMPONENT CONTRACT (not only CSS variables)
   Hardcoded legacy primary colors are also updated in Pixel CSS and
   base tokens. This layer handles HTML that bypasses those adapters.
   ================================================================ */
html:root {
  color-scheme:light;
  --talnt-brand-primary:#082755;
  --talnt-brand-action:#0768EB;
  --talnt-brand-action-hover:#0558C7;
  --talnt-brand-sky:#14A7FF;
  --talnt-brand-accent:#FF9F19;
  --talnt-brand-page:#F8FAFC;
  --talnt-brand-text:#0F172A;
}
/* Explicit headings: class-based page CSS used to override :where(h1...)
   because :where() has zero specificity. */
body :is(.hero-v016 h1,.career26-uihero h1,.career26-article__head h1,.career26-card h3,
 .jf-admin-pagehead h1,.jf-admin-main .ac-heading h1,.jf-candidate-head h1,
 .jf-dashboard-page h1,.jf-settings-page h1,.ac-page h1,.job-detail-title-v085,
 .section-head h2,.career26-empty h2){color:var(--color-heading);}
/* Existing buttons not opted into Pixel Button still receive the brand action. */
body :is(.btn-primary,.jf-login-submit,.jf-reg-primary,.jf-btn.primary,.ac-btn.ac-primary,
 .ac-primary,.jf-admin-action-btn.primary,.search-submit-v053,
 .job-detail-apply-primary-v085,.company-jobs-btn-v101,
 .ds-cta,.employer-notify-btn,.employer-bottom-btn):not([data-pixel-button="true"]) {
  background-color:var(--color-action);
  border-color:var(--color-action);
  color:#fff;
}
body :is(.btn-primary,.jf-login-submit,.jf-reg-primary,.jf-btn.primary,.ac-btn.ac-primary,
 .ac-primary,.jf-admin-action-btn.primary,.search-submit-v053,
 .job-detail-apply-primary-v085,.company-jobs-btn-v101,
 .ds-cta,.employer-notify-btn,.employer-bottom-btn):not([data-pixel-button="true"]):hover {
  background-color:var(--color-action-hover);
  border-color:var(--color-action-hover);
  color:#fff;
}
/* Action buttons normalized by Pixel Button JS have their own!important
   paint declarations: update the custom properties they actually consume. */
html body [data-pixel-button="true"][data-pixel-variant="primary"] {
  --px-btn-bg:var(--color-action);
  --px-btn-stroke:var(--color-action);
  --px-btn-fg:#fff;
  --px-btn-hover-bg:var(--color-action-hover);
  --px-btn-hover-stroke:var(--color-action-hover);
  --px-btn-hover-fg:#fff;
}
html body [data-pixel-button="true"][data-pixel-variant="secondary"],
html body [data-pixel-button="true"][data-pixel-variant="textLink"] {
  --px-btn-fg:var(--color-action);
  --px-btn-hover-fg:var(--color-action-hover);
}
/* Only active navigation changes blue. All inactive navigation remains neutral. */
body :is(.desktop-nav a.active,.desktop-nav a[aria-current="page"],.mobile-nav a.active,
 .jf-admin-sidebar nav a.active,.jf-admin-sidebar nav a[aria-current="page"],
 .jf-dash-sidebar a.active,.jf-settings-sidebar nav a.active){color:var(--color-action);}
body :is(.jf-admin-sidebar nav a.active,.jf-admin-sidebar nav a[aria-current="page"],
 .jf-dash-sidebar a.active,.jf-settings-sidebar nav a.active){background-color:var(--color-selected-bg);}
body :is(.jf-admin-sidebar nav a,.jf-dash-sidebar a,.jf-settings-sidebar nav a):not(.active):not([aria-current="page"]) {color:var(--color-text-muted);}
/* Highlight selected / featured, without changing success or error alerts. */
body :is(.career26 .career26-filter button.active,.filter-chip.active,
 .category-pill.active,.tab-chip.active){background-color:var(--color-action);color:#fff;}
body :is(.job-featured-tag,.featured-badge,.job-badge-featured,.achievement-badge,.badge-featured)
 {background-color:var(--color-accent);color:var(--color-on-accent);}
body :is(.job-featured-tag,.featured-badge,.job-badge-featured,.achievement-badge,.badge-featured) svg{color:inherit;}
body :is(input,textarea,select):focus-visible{outline-color:var(--color-action);}
body :is(.talnt-progress-indicator,.system-progress > span,.ra-progress > span){background-color:var(--color-tertiary);}