/* CareerCompanion — Warm Career / Hearth Path theme
   Applied after all area-specific styles so the design system is consistent
   without changing feature behavior. */

:root {
    --ink: #34342f;
    --muted: #746f66;
    --line: #e6ddcf;
    --surface: #fffdf9;
    --surface-soft: #f7f2e8;
    --surface-sage: #eef1e8;
    --surface-clay: #fbefe9;
    --primary: #62745c;
    --primary-dark: #4f624a;
    --primary-soft: #e7ede2;
    --clay: #bf6f50;
    --clay-dark: #a95d41;
    --clay-soft: #f7e6df;
    --gold: #c69a4d;
    --gold-soft: #f5ecd9;
    --charcoal: #34342f;
    --success: #58745d;
    --success-soft: #edf4ec;
    --danger: #9e4d43;
    --shadow: 0 16px 45px rgba(76, 64, 46, .085);
    --shadow-soft: 0 8px 24px rgba(76, 64, 46, .06);
    --display-font: Georgia, "Times New Roman", serif;
    --body-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
    color: var(--ink);
    background: #f4efe6;
    font-family: var(--body-font);
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 2%, rgba(198,154,77,.07), transparent 26rem),
        radial-gradient(circle at 92% 14%, rgba(98,116,92,.07), transparent 30rem),
        #f6f1e8;
}

::selection { color: #fff; background: var(--clay); }

a { color: #596c54; }
a:hover { color: var(--clay-dark); }

/* ---------- Global shell ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 82px;
    padding: 10px clamp(18px, 4vw, 58px);
    color: var(--ink);
    background: rgba(255,253,249,.94);
    border-bottom: 1px solid rgba(214,203,186,.86);
    box-shadow: 0 7px 26px rgba(80,66,45,.07);
    backdrop-filter: blur(16px);
}

.brand { gap: 10px; color: var(--ink); min-width: max-content; }
.brand:hover { color: var(--ink); }
.brand-logo-mark { width: 48px; height: 48px; flex: 0 0 auto; }
.brand-copy { display: block; }
.brand-name {
    display: block;
    font-family: var(--display-font);
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.025em;
}
.brand-name span:first-child { color: #5f7059; }
.brand-name span:last-child { color: #b96848; }
.brand small {
    max-width: 290px;
    margin-top: 5px;
    color: #81796f;
    font-size: 10px;
    letter-spacing: .015em;
}

.main-nav { gap: 7px; flex-wrap: wrap; }
.main-nav a {
    padding: 8px 10px;
    color: #615f59;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    transition: background-color .15s ease, color .15s ease;
}
.main-nav a:hover {
    color: #4d5f49;
    background: #edf1e9;
    text-decoration: none;
}

.account-nav { color: #746f66; }
.button.button-quiet {
    color: #5f665c;
    background: transparent;
    border-color: #d7cec0;
}
.button.button-quiet:hover { color: #4a5946; background: #f0eee8; }

.career-mode-pill {
    color: #5b6757 !important;
    background: #f0f3ec !important;
    border-color: #d7dfd1 !important;
    box-shadow: none;
}
.career-mode-pill span { color: #8a877f !important; }
.career-mode-pill:hover { color: #4c5c48 !important; background: #e7ece3 !important; }

.page-shell { width: min(1240px, calc(100% - 32px)); margin-top: 36px; }
.site-footer {
    align-items: center;
    color: #756f66;
    background: #eee8dd;
    border-top: 1px solid #dfd5c6;
}
.site-footer__brand { display: inline-flex; align-items: center; gap: 8px; color: #586852; }
.site-footer__brand img { width: 24px; height: 24px; }
.site-footer__brand strong { font-family: var(--display-font); font-weight: 500; }

/* ---------- Typography ---------- */
.page-heading h1,
.career-experience-heading h1,
.career-center-heading h1,
.hero h1,
.warm-landing h1,
.auth-card h1 {
    font-family: var(--display-font);
    color: #354135;
    font-weight: 500;
    letter-spacing: -.035em;
}

.card h2,
.card h3,
.panel h2,
.panel h3,
.section-heading-row h2,
.warm-mode-card h2,
.warm-center-story h2 {
    color: #3b4038;
}

.page-eyebrow,
.story-card .eyebrow {
    color: #a7684d !important;
    letter-spacing: .11em;
}

/* ---------- Surfaces ---------- */
.card,
.panel,
.metric,
.table-wrap,
.auth-card {
    background: rgba(255,253,249,.96);
    border-color: var(--line);
    box-shadow: var(--shadow-soft);
}

.card,
.panel { border-radius: 18px; }
.panel { padding: 28px; }

.metric { border-radius: 14px; }
.metric strong { color: #52654e; }

/* ---------- Buttons / inputs ---------- */
.button {
    color: #fff;
    background: #62745c;
    border-color: #62745c;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(83,104,78,.12);
}
.button:hover { color: #fff; background: #4f624a; border-color: #4f624a; }
.button-secondary {
    color: #5c6e57;
    background: #fffdf9;
    border-color: #b9c4b3;
    box-shadow: none;
}
.button-secondary:hover { color: #4d5f49; background: #edf1e9; }
.button-danger { background: #9e4d43; border-color: #9e4d43; }

.input, .textarea, .select,
.business-health-form-grid input,
.business-health-form-grid select {
    color: var(--ink);
    background: #fffdf9;
    border-color: #d9cfbf;
    border-radius: 10px;
}
.input:focus, .textarea:focus, .select:focus,
.business-health-form-grid input:focus,
.business-health-form-grid select:focus {
    border-color: #87997f;
    outline: 3px solid rgba(98,116,92,.12);
}

/* ---------- Tables / badges / progress ---------- */
.table-wrap { overflow: hidden; }
th { color: #6b685f; background: #f4f0e8; }
th, td { border-color: #ebe3d7; }
tbody tr:hover td { background: rgba(247,242,232,.55); }

.badge { color: #5b5b54; background: #eeeae2; }
.badge-new { color: #9a583f; background: #f8e8df; }
.badge-success { color: #4d6b53; background: #e8f0e7; }
.tag { color: #5b6c56; background: #edf1e9; }
.progress { background: #e9e3d9; }
.progress > span { background: linear-gradient(90deg, #72846c, #bd785b); }

.alert-success { color: #4c684f; background: #edf4ec; border-color: #cbdcc8; }
.alert-danger { color: #93483f; background: #fbefec; border-color: #e7c6bf; }

/* ---------- Public landing ---------- */
.warm-landing {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
    gap: 42px;
    min-height: 470px;
    padding: clamp(34px, 6vw, 72px);
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 18%, rgba(198,154,77,.18), transparent 16rem),
        linear-gradient(135deg, #fffdf9, #f6efe4 68%, #edf1e9);
    border: 1px solid #e5dac9;
    border-radius: 28px;
    box-shadow: var(--shadow);
}
.warm-landing::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 170px;
    right: -40px;
    bottom: -55px;
    background: #dfe7da;
    border-radius: 55% 45% 0 0 / 100% 100% 0 0;
    opacity: .8;
    transform: rotate(-4deg);
}
.warm-landing__copy { position: relative; z-index: 2; align-self: center; }
.warm-landing__eyebrow {
    display: inline-flex;
    margin-bottom: 15px;
    padding: 7px 11px;
    color: #8d604b;
    background: #f6e7df;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.warm-landing h1 { max-width: 760px; margin: 0 0 18px; font-size: clamp(42px, 6.5vw, 72px); line-height: 1.02; }
.warm-landing p { max-width: 720px; margin: 0; color: #6d685f; font-size: 18px; line-height: 1.68; }
.warm-landing__actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 28px; }
.warm-landing__art { position: relative; z-index: 2; display: grid; place-items: center; }
.warm-landing__art img { width: min(100%, 340px); filter: drop-shadow(0 18px 24px rgba(86,68,45,.12)); }
.warm-landing__promise {
    position: absolute;
    z-index: 3;
    right: 4%;
    bottom: 34px;
    max-width: 290px;
    padding: 14px 17px;
    color: #5e5a52;
    background: rgba(255,253,249,.86);
    border: 1px solid #e6dac8;
    border-radius: 14px;
    box-shadow: 0 10px 26px rgba(80,66,45,.08);
    backdrop-filter: blur(8px);
}
.warm-landing__promise strong { display: block; color: #50634d; margin-bottom: 3px; }

.warm-mode-section { margin-top: 22px; }
.warm-mode-section__heading { max-width: 780px; margin: 0 auto 18px; text-align: center; }
.warm-mode-section__heading h2 { margin: 0 0 7px; font-family: var(--display-font); font-size: 34px; font-weight: 500; color: #3f493d; }
.warm-mode-section__heading p { margin: 0; color: var(--muted); }
.warm-mode-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.warm-mode-card { position: relative; padding: 24px; overflow: hidden; }
.warm-mode-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #76866f; }
.warm-mode-card:nth-child(2)::before { background: #c57657; }
.warm-mode-card:nth-child(3)::before { background: #c49a53; }
.warm-mode-card__icon {
    display: grid;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    place-items: center;
    color: #52634e;
    background: #edf1e9;
    border-radius: 50%;
    font-size: 21px;
}
.warm-mode-card:nth-child(2) .warm-mode-card__icon { color: #a75f45; background: #f8e8e0; }
.warm-mode-card:nth-child(3) .warm-mode-card__icon { color: #9b7331; background: #f6eddc; }
.warm-mode-card h2 { margin: 0 0 8px; font-family: var(--display-font); font-size: 25px; font-weight: 500; }
.warm-mode-card p { margin: 0; color: var(--muted); line-height: 1.6; }

.warm-center-story { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 30px; margin-top: 18px; align-items: center; }
.warm-center-story__mark { display: grid; place-items: center; padding: 20px; }
.warm-center-story__mark img { width: min(100%, 250px); }
.warm-center-story h2 { margin: 0 0 10px; font-family: var(--display-font); font-size: 32px; font-weight: 500; }
.warm-center-story p { margin: 0; color: var(--muted); line-height: 1.7; }
.warm-center-story__points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.warm-center-story__points span { padding: 11px 12px; color: #5b6258; background: #f4f1e9; border: 1px solid #e6ddd1; border-radius: 10px; font-size: 12px; font-weight: 700; }

/* ---------- Authentication ---------- */
.auth-shell { min-height: 72vh; }
.auth-card { width: min(470px,100%); padding: 38px; }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.auth-brand img { width: 52px; height: 52px; }
.auth-brand strong { font-family: var(--display-font); font-size: 22px; font-weight: 500; color: #586852; }
.auth-card > p { color: var(--muted); line-height: 1.55; }
.auth-development-note { margin-bottom: 0; padding-top: 16px; color: #989087 !important; border-top: 1px solid #eee5d8; font-size: 11px !important; }

/* ---------- Career mode / My Career ---------- */
.career-mode-panel--choose {
    border-color: #d7c9b8 !important;
    box-shadow: 0 12px 32px rgba(80,66,45,.075) !important;
}
.career-mode-current { color: #9a6047 !important; background: #f7e8e0 !important; }
.career-mode-option {
    background: #fbf8f2 !important;
    border-color: #e4dccf !important;
    border-radius: 15px !important;
}
.career-mode-option:nth-child(1) { background: #f3f5ef !important; }
.career-mode-option:nth-child(2) { background: #fbf1ec !important; }
.career-mode-option:nth-child(3) { background: #fbf7ea !important; }
.career-mode-option--selected { border-color: #a8b59f !important; box-shadow: inset 0 0 0 1px rgba(98,116,92,.08) !important; }
.career-mode-option__icon { color: #5b6d56 !important; background: #e5ebe0 !important; border-radius: 50% !important; }
.career-mode-option:nth-child(2) .career-mode-option__icon { color: #a46048 !important; background: #f4e3db !important; }
.career-mode-option:nth-child(3) .career-mode-option__icon { color: #987237 !important; background: #f4ead5 !important; }
.career-mode-option button { color: #5d7058 !important; }
.career-mode-option:nth-child(2) button { color: #ac6449 !important; }
.career-mode-option:nth-child(3) button { color: #987238 !important; }

.career-now {
    color: #3e443c !important;
    background:
        radial-gradient(circle at 88% 15%, rgba(198,154,77,.16), transparent 18rem),
        linear-gradient(135deg,#eef2e9,#f7efe6 72%,#f3e7d2) !important;
    border: 1px solid #ded5c7 !important;
    box-shadow: var(--shadow-soft) !important;
}
.career-now .page-eyebrow { color: #a2654c !important; }
.career-now h2 { color: #40503e !important; font-family: var(--display-font); font-weight: 500; }
.career-now p { color: #6e6a62 !important; }
.career-now__button { color: #fff !important; background: #64765f !important; border-color: #64765f !important; }
.career-now__button:hover { color: #fff !important; background: #4f624a !important; }

.career-core-metrics a,
.career-action-tiles a,
.career-search-funnel a,
.career-center-tools a {
    background: #faf7f1 !important;
    border-color: #e7dfd3 !important;
}
.career-core-metrics a:hover,
.career-action-tiles a:hover,
.career-search-funnel a:hover,
.career-center-tools a:hover { background: #eff2ea !important; border-color: #cbd5c5 !important; }
.career-core-metrics strong,
.career-search-funnel strong,
.career-center-node strong { color: #62745c !important; }

.career-philosophy,
.career-center-flywheel { background: #f3f2eb !important; border-color: #ddd6c9 !important; }
.career-center-ring { background: linear-gradient(180deg,#f8f5ee,#f0eee7) !important; border-color: #e0d9ce !important; }
.career-center-node { background: #fffdf9 !important; border-color: #e2d9cc !important; box-shadow: 0 6px 18px rgba(76,64,46,.045) !important; }
.career-center-node:hover { background: #eef2e9 !important; border-color: #b8c5b1 !important; }
.career-center-side::before { background: #c57859 !important; }
.career-center-side--working::before { background: #75886e !important; }

/* Career Growth cards/evidence inherit the warm system even where feature CSS used explicit gray/blue. */
.area-career .career-growth-summary-card,
.area-career .career-growth-card,
.area-career .career-growth-evidence-card,
.area-career .career-review-card,
.area-career .career-impact-card,
.area-career [class*="growth-"] {
    border-color: #e5ddd1;
}

/* ---------- Employer intelligence ---------- */
.employer-demo-banner,
.employer-live-banner,
.employer-privacy-banner,
.employer-create-note,
.employer-value-card,
.employer-empty-state,
.admin-marketplace-note,
.admin-marketplace-notes > div,
.admin-marketplace-empty {
    background: #f8f4ed !important;
    border-color: #e1d8ca !important;
}
.employer-live-banner { background: #edf2e9 !important; border-color: #b9c8b2 !important; }
.employer-demo-banner { background: #fbf2e8 !important; border-color: #dfc8aa !important; }
.employer-privacy-banner { background: #f2f1ea !important; }

.employer-role-score,
.employer-match-score,
.employer-preview-counts span,
.employer-skill-tags span { color: #54634f; background: #e9eee5 !important; }

.employer-role-classification > div,
.employer-comp-stats > div,
.employer-reach-funnel > div,
.employer-candidate-signals span,
.employer-candidate-card,
.admin-marketplace-metric,
.admin-marketplace-kpis > div {
    background: #fffdf9 !important;
    border-color: #e7dfd3 !important;
}
.employer-insight { background: #f7f3ec !important; border-left-color: #a3aa94 !important; }
.employer-insight--warning { border-left-color: #c89449 !important; }
.employer-insight--good { border-left-color: #6f8a70 !important; }
.salary-reach-track { background: #e7e0d5 !important; color: #72826c; }
.salary-reach-row--current { background: #eef1e9 !important; }

/* ---------- Admin / business health / telemetry ---------- */
.telemetry-metric,
.business-health-kpi,
.admin-marketplace-metric,
.telemetry-panel,
.business-health-panel,
.admin-marketplace-panel {
    background: #fffdf9 !important;
    border-color: #e5ddd1 !important;
    box-shadow: var(--shadow-soft);
}
.telemetry-metric--hero,
.business-health-kpi--hero,
.admin-marketplace-metric--hero { border-color: #a8b69f !important; }
.telemetry-metric--warning,
.business-health-panel--attention { border-color: #d8b77d !important; background: #fcf6e9 !important; }
.business-health-panel--moat,
.admin-marketplace-metric--accent { border-color: #cb8a6f !important; background: #fbf0ea !important; }

.admin-telemetry-privacy,
.admin-telemetry-footnote,
.business-health-note,
.business-health-message,
.telemetry-mode-row,
.telemetry-transition-row,
.telemetry-daily-list > div,
.telemetry-anomaly,
.business-health-stat-list > div {
    background: #f7f3ec !important;
    border-color: #e4dccf !important;
}

.telemetry-table th,
.business-health-table th,
.admin-marketplace-table-wrap th { color: #6d685f !important; background: #f4f0e8 !important; }
.telemetry-table td,
.telemetry-table th,
.business-health-table td,
.business-health-table th,
.admin-marketplace-table-wrap td,
.admin-marketplace-table-wrap th { border-color: #e9e1d5 !important; }

/* ---------- Existing home hero fallback ---------- */
.hero {
    color: var(--ink);
    background:
        radial-gradient(circle at 88% 14%, rgba(198,154,77,.17), transparent 16rem),
        linear-gradient(135deg,#fffdf9,#f2eee5 65%,#eaf0e6);
    border: 1px solid #e3d9c9;
}
.hero h1 { color: #3a4639; }
.hero p { color: #6d685f; }
.hero-card { color: #535a50; background: rgba(255,253,249,.75); border-color: #ded4c4; }

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
    .site-header { grid-template-columns: 1fr auto; }
    .main-nav { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .warm-landing { grid-template-columns: 1fr; }
    .warm-landing__art { display: none; }
    .warm-landing__promise { position: relative; right: auto; bottom: auto; margin-top: 22px; }
}

@media (max-width: 850px) {
    .brand small { display: none; }
    .warm-mode-grid,
    .warm-center-story { grid-template-columns: 1fr; }
    .warm-center-story__mark { order: -1; }
}

@media (max-width: 640px) {
    .site-header { gap: 12px; padding: 9px 14px; }
    .brand-logo-mark { width: 42px; height: 42px; }
    .brand-name { font-size: 18px; }
    .account-nav > span:not(.career-mode-pill) { display: none; }
    .page-shell { width: min(100% - 22px, 1240px); margin-top: 20px; }
    .warm-landing { padding: 28px 22px; border-radius: 22px; }
    .warm-landing h1 { font-size: 42px; }
    .warm-center-story__points { grid-template-columns: 1fr; }
    .site-footer { gap: 10px; align-items: flex-start; flex-direction: column; }
}