/*
 * BestCV design tokens
 *
 * This file deliberately follows the existing site and builder styles. It
 * changes presentation only: layouts, Livewire bindings and CV data remain
 * untouched while both experiences consume the same brand palette.
 */
:root {
    --bestcv-primary: #263a67;
    --bestcv-primary-dark: #17233f;
    --bestcv-ai: #5367c7;
    --bestcv-gold: #d99a3d;
    --bestcv-terracotta: #c96845;
    --bestcv-background: #fbf9f4;
    --bestcv-ivory: #fbf9f4;
    --bestcv-surface-soft: #f1f4fa;
    --bestcv-surface: #ffffff;
    --bestcv-text: #182033;
    --bestcv-text-muted: #667085;
    --bestcv-border: #dde2ec;
    --bestcv-success: #27806b;
    --bestcv-danger: #b54747;

    /* Derived presentation tones keep all tints anchored to the palette. */
    --bestcv-primary-soft: color-mix(in srgb, var(--bestcv-primary) 9%, var(--bestcv-surface));
    --bestcv-ai-soft: color-mix(in srgb, var(--bestcv-ai) 12%, var(--bestcv-surface));
    --bestcv-gold-soft: color-mix(in srgb, var(--bestcv-gold) 15%, var(--bestcv-surface));
    --bestcv-terracotta-soft: color-mix(in srgb, var(--bestcv-terracotta) 12%, var(--bestcv-surface));
    --bestcv-success-soft: color-mix(in srgb, var(--bestcv-success) 11%, var(--bestcv-surface));
    --bestcv-danger-soft: color-mix(in srgb, var(--bestcv-danger) 10%, var(--bestcv-surface));

    /* Compatibility aliases for the pre-tokenized component styles. */
    --bestcv-purple: var(--bestcv-primary);
    --bestcv-purple-dark: var(--bestcv-primary-dark);
    --bestcv-purple-light: var(--bestcv-primary-soft);
    --bestcv-orange: var(--bestcv-terracotta);
    --bestcv-orange-light: var(--bestcv-terracotta-soft);
    --bestcv-navy: var(--bestcv-text);
    --bestcv-muted: var(--bestcv-text-muted);
    --bestcv-white: var(--bestcv-surface);

    /* Bootstrap controls used by the builder share the same semantic colors. */
    --bs-primary: var(--bestcv-primary);
    --bs-primary-rgb: 38, 58, 103;
    --bs-success: var(--bestcv-success);
    --bs-success-rgb: 39, 128, 107;
    --bs-warning: var(--bestcv-gold);
    --bs-warning-rgb: 217, 154, 61;
    --bs-danger: var(--bestcv-danger);
    --bs-danger-rgb: 181, 71, 71;
    --bs-body-color: var(--bestcv-text);
    --bs-body-bg: var(--bestcv-background);
    --bs-border-color: var(--bestcv-border);

    --resume-brand: var(--bestcv-primary);
    --resume-brand-dark: var(--bestcv-primary-dark);
    --resume-brand-soft: var(--bestcv-primary-soft);
    --resume-ink: var(--bestcv-text);
    --resume-muted: var(--bestcv-text-muted);
    --resume-line: var(--bestcv-border);
}

/* ---------- Shared front experience ---------- */

.bestcv-site {
    background: var(--bestcv-background);
    color: var(--bestcv-text);
}

.bestcv-header,
.bestcv-error-header {
    background: color-mix(in srgb, var(--bestcv-surface) 94%, var(--bestcv-background));
}

.bestcv-brand,
.bestcv-brand:hover,
.bestcv-header__nav a:hover,
.bestcv-back-link:hover,
.bestcv-text-action,
.bestcv-models-link,
.bestcv-auth-options a,
.bestcv-auth-switch a,
.bestcv-auth-text-button {
    color: var(--bestcv-primary) !important;
}

.bestcv-brand:hover,
.bestcv-text-action:hover,
.bestcv-models-link:hover,
.bestcv-auth-options a:hover,
.bestcv-auth-switch a:hover,
.bestcv-auth-text-button:hover {
    color: var(--bestcv-primary-dark) !important;
}

.bestcv-button--primary,
.bestcv-file-button,
.bestcv-auth-submit {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-primary);
}

.bestcv-button--primary:hover,
.bestcv-button--primary:focus-visible,
.bestcv-file-button:hover,
.bestcv-auth-submit:hover {
    border-color: var(--bestcv-primary-dark);
    background: var(--bestcv-primary-dark);
}

.bestcv-button--secondary {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-surface);
    color: var(--bestcv-primary) !important;
}

.bestcv-button--secondary:hover,
.bestcv-button--secondary:focus-visible {
    border-color: var(--bestcv-primary-dark);
    background: var(--bestcv-primary-soft);
    color: var(--bestcv-primary-dark) !important;
}

.bestcv-button:focus-visible,
.bestcv-header a:focus-visible,
.bestcv-logout:focus-visible,
.bestcv-file-button:focus-within,
.bestcv-auth-submit:focus-visible,
.bestcv-auth-text-button:focus-visible,
.bestcv-auth-options a:focus-visible,
.bestcv-auth-switch a:focus-visible,
.bestcv-auth-check:focus-within,
.bestcv-error-page a:focus-visible {
    outline-color: color-mix(in srgb, var(--bestcv-primary) 32%, transparent);
}

.bestcv-hero {
    background:
        radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--bestcv-ai) 23%, transparent) 0, color-mix(in srgb, var(--bestcv-ai) 7%, transparent) 23%, transparent 47%),
        linear-gradient(112deg, var(--bestcv-background) 0%, var(--bestcv-surface-soft) 100%);
}

.bestcv-hero h1 span,
.bestcv-eyebrow,
.bestcv-choice-badge,
.bestcv-barma-intro__icon,
.bestcv-benefit__icon,
.bestcv-choice-icon,
.bestcv-auth-card__icon,
.bestcv-cv-card__thumb {
    color: var(--bestcv-ai);
}

.bestcv-eyebrow,
.bestcv-choice-badge,
.bestcv-barma-intro__icon,
.bestcv-benefit__icon,
.bestcv-choice-icon,
.bestcv-auth-card__icon,
.bestcv-cv-card__thumb {
    background: var(--bestcv-ai-soft);
}

.bestcv-eyebrow i,
.bestcv-template-card__topline i,
.bestcv-pricing-note i {
    color: var(--bestcv-gold);
}

.bestcv-hero__description,
.bestcv-barma-intro p,
.bestcv-reassurance,
.bestcv-benefit p,
.bestcv-section-heading p,
.bestcv-start__intro>p:last-child,
.bestcv-choice-card p,
.bestcv-start__privacy,
.bestcv-auth-card__heading p,
.bestcv-auth-copy,
.bestcv-auth-check,
.bestcv-auth-switch,
.bestcv-auth-page__privacy,
.bestcv-error-header__label,
.bestcv-error-copy p {
    color: var(--bestcv-text-muted);
}

.bestcv-barma-intro {
    border-color: color-mix(in srgb, var(--bestcv-ai) 24%, var(--bestcv-border));
    background: color-mix(in srgb, var(--bestcv-surface) 76%, var(--bestcv-surface-soft));
}

.bestcv-barma-nameplate {
    background: color-mix(in srgb, var(--bestcv-primary-dark) 94%, transparent);
    box-shadow: 0 0.45rem 1.25rem color-mix(in srgb, var(--bestcv-primary-dark) 20%, transparent);
}

.bestcv-speech {
    border-color: var(--bestcv-border);
    background: color-mix(in srgb, var(--bestcv-surface) 96%, var(--bestcv-surface-soft));
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--bestcv-primary-dark) 10%, transparent);
    color: var(--bestcv-text-muted);
}

.bestcv-speech strong,
.bestcv-template-card__topline,
.bestcv-start__eyebrow {
    color: var(--bestcv-ai);
}

.bestcv-speech::after {
    border-color: var(--bestcv-border);
    background: var(--bestcv-surface);
}

.bestcv-benefit:nth-child(2) .bestcv-benefit__icon,
.bestcv-benefit:nth-child(3) .bestcv-benefit__icon {
    background: var(--bestcv-gold-soft);
    color: var(--bestcv-gold);
}

.bestcv-models {
    background: var(--bestcv-surface-soft);
}

.bestcv-template-card,
.bestcv-choice-card,
.bestcv-account-card,
.bestcv-cv-card {
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--bestcv-primary-dark) 5%, transparent);
}

.bestcv-template-card__meta {
    color: var(--bestcv-text-muted);
}

.bestcv-start-page {
    background:
        radial-gradient(circle at 4% 35%, color-mix(in srgb, var(--bestcv-ai) 14%, transparent), transparent 22rem),
        radial-gradient(circle at 92% 23%, color-mix(in srgb, var(--bestcv-gold) 14%, transparent), transparent 18rem),
        var(--bestcv-surface);
}

.bestcv-choice-card--featured {
    border-color: var(--bestcv-ai);
    background: linear-gradient(145deg, var(--bestcv-surface) 0%, var(--bestcv-ai-soft) 100%);
}

.bestcv-choice-card--featured .bestcv-choice-badge {
    color: var(--bestcv-primary-dark);
}

.bestcv-file-loading {
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.bestcv-import-error,
.bestcv-auth-error {
    color: var(--bestcv-danger) !important;
}

.bestcv-start__barma::before {
    border-color: color-mix(in srgb, var(--bestcv-ai) 23%, transparent);
}

.bestcv-auth-page {
    background:
        radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--bestcv-ai) 25%, transparent), transparent 23rem),
        radial-gradient(circle at 95% 92%, color-mix(in srgb, var(--bestcv-gold) 19%, transparent), transparent 26rem),
        linear-gradient(135deg, var(--bestcv-background) 0%, var(--bestcv-surface-soft) 100%);
}

.bestcv-auth-page__glow,
.bestcv-auth-card {
    border-color: var(--bestcv-border);
}

.bestcv-auth-card {
    box-shadow: 0 1rem 3.5rem color-mix(in srgb, var(--bestcv-primary-dark) 10%, transparent);
}

.bestcv-auth-field label {
    color: var(--bestcv-text);
}

.bestcv-auth-field input {
    border-color: var(--bestcv-border);
    background: var(--bestcv-surface);
    color: var(--bestcv-text);
}

.bestcv-auth-field input:hover {
    border-color: color-mix(in srgb, var(--bestcv-primary) 55%, var(--bestcv-border));
}

.bestcv-auth-field input:focus {
    border-color: var(--bestcv-primary);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--bestcv-primary) 15%, transparent);
}

.bestcv-auth-check input {
    accent-color: var(--bestcv-primary);
}

.bestcv-auth-alert--success {
    border-color: color-mix(in srgb, var(--bestcv-success) 34%, var(--bestcv-border));
    background: var(--bestcv-success-soft);
    color: var(--bestcv-success);
}

.bestcv-auth-alert--info {
    border-color: color-mix(in srgb, var(--bestcv-ai) 34%, var(--bestcv-border));
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.bestcv-auth-alert--error,
.bestcv-account-card--danger,
.bestcv-account-confirm {
    border-color: color-mix(in srgb, var(--bestcv-danger) 35%, var(--bestcv-border));
}

.bestcv-auth-alert--error,
.bestcv-button--danger:hover,
.bestcv-button--danger:focus-visible,
.bestcv-cv-card__icon-btn--danger:hover {
    background: var(--bestcv-danger-soft);
    color: var(--bestcv-danger);
}

.bestcv-auth-showcase {
    border-color: color-mix(in srgb, var(--bestcv-primary) 28%, var(--bestcv-border));
    background:
        radial-gradient(circle at 83% 22%, color-mix(in srgb, var(--bestcv-surface) 24%, transparent), transparent 11rem),
        linear-gradient(148deg, var(--bestcv-primary-dark) 0%, var(--bestcv-primary) 100%);
    box-shadow: 0 1rem 3.5rem color-mix(in srgb, var(--bestcv-primary-dark) 17%, transparent);
}

.bestcv-auth-showcase::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bestcv-primary-dark) 78%, transparent) 0%, color-mix(in srgb, var(--bestcv-primary) 20%, transparent) 50%, color-mix(in srgb, var(--bestcv-primary-dark) 64%, transparent) 100%);
}

.bestcv-auth-showcase__copy span {
    color: var(--bestcv-surface-soft);
}

.bestcv-auth-showcase p {
    color: color-mix(in srgb, var(--bestcv-surface) 82%, var(--bestcv-ai));
}

.bestcv-account-card__success,
.bestcv-account-card__saved,
.bestcv-cv-card__badge--completed {
    color: var(--bestcv-success);
}

.bestcv-cv-card__badge--completed {
    background: var(--bestcv-success-soft);
}

.bestcv-button--danger,
.bestcv-cv-card__icon-btn--danger:hover {
    border-color: color-mix(in srgb, var(--bestcv-danger) 35%, var(--bestcv-border));
    color: var(--bestcv-danger) !important;
}

.bestcv-modal-backdrop {
    background: color-mix(in srgb, var(--bestcv-primary-dark) 52%, transparent);
}

.bestcv-modal {
    box-shadow: 0 1.5rem 3.5rem color-mix(in srgb, var(--bestcv-primary-dark) 26%, transparent);
}

/* Error pages are a public-facing surface, too. */
.bestcv-error-main {
    background:
        radial-gradient(circle at 82% 38%, color-mix(in srgb, var(--bestcv-ai) 26%, transparent), transparent 28rem),
        radial-gradient(circle at 6% 92%, color-mix(in srgb, var(--bestcv-gold) 21%, transparent), transparent 27rem),
        linear-gradient(115deg, var(--bestcv-surface) 0%, var(--bestcv-background) 100%);
}

.bestcv-error-copy__badge {
    border-color: color-mix(in srgb, var(--bestcv-ai) 25%, var(--bestcv-border));
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.bestcv-error-copy__badge span {
    color: var(--bestcv-gold);
}

.bestcv-error-visual__halo {
    border-color: color-mix(in srgb, var(--bestcv-ai) 18%, var(--bestcv-border));
    background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--bestcv-surface) 95%, transparent), color-mix(in srgb, var(--bestcv-ai) 19%, transparent) 65%, color-mix(in srgb, var(--bestcv-ai) 4%, transparent) 72%);
}

.bestcv-error-visual__code {
    -webkit-text-stroke-color: color-mix(in srgb, var(--bestcv-primary) 17%, transparent);
}

/* ---------- CV builder workspace ---------- */

.resume-builder-body {
    background: var(--bestcv-background);
    color: var(--bestcv-text);
}

.resume-builder-header,
.resume-builder-subheader,
.resume-rail,
.resume-drawer-header,
.resume-experience-card,
.resume-builder-body .resume-editor-section,
.resume-builder-body .form-control,
.resume-builder-body .form-select {
    background: var(--bestcv-surface);
}

.resume-builder-header {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bestcv-primary-dark) 4%, transparent);
}

.resume-platform-brand em {
    color: var(--bestcv-terracotta);
}

.resume-title-caption,
.resume-drawer-step,
.resume-drawer-body .form-label,
.resume-experience-card-label {
    color: var(--bestcv-text-muted);
}

.resume-builder-body .btn-primary {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-primary);
    box-shadow: 0 0.25rem 0.65rem color-mix(in srgb, var(--bestcv-primary) 20%, transparent);
}

.resume-builder-body .btn-primary:hover,
.resume-builder-body .btn-primary:focus {
    border-color: var(--bestcv-primary-dark);
    background: var(--bestcv-primary-dark);
}

.resume-builder-body .btn-outline-primary {
    border-color: color-mix(in srgb, var(--bestcv-primary) 35%, var(--bestcv-border));
    background: var(--bestcv-primary-soft);
    color: var(--bestcv-primary);
}

.resume-builder-body .btn-outline-primary:hover,
.resume-builder-body .btn-outline-primary:focus {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-primary);
    color: var(--bestcv-surface);
}

.resume-builder-body .btn-outline-secondary,
.resume-stepper,
.resume-drawer-close,
.resume-zoom-btn {
    border-color: var(--bestcv-border);
    background: var(--bestcv-surface);
    color: var(--bestcv-text-muted);
}

.resume-builder-body .btn-outline-secondary:hover,
.resume-builder-body .btn-outline-secondary:focus,
.resume-drawer-close:hover,
.resume-rail-btn:hover {
    border-color: color-mix(in srgb, var(--bestcv-primary) 35%, var(--bestcv-border));
    background: var(--bestcv-primary-soft);
    color: var(--bestcv-primary-dark);
}

.resume-token-balance,
.resume-ats-callout {
    border-color: color-mix(in srgb, var(--bestcv-gold) 40%, var(--bestcv-border));
    background: var(--bestcv-gold-soft);
    color: color-mix(in srgb, var(--bestcv-gold) 72%, var(--bestcv-text));
}

.resume-save-status-pill {
    background: var(--bestcv-surface-soft);
    color: var(--bestcv-text-muted);
}

.resume-save-status-pill.is-saved,
.resume-save-status-pill .bi-check-circle-fill,
.resume-save-status-pill .bi-cloud-check {
    color: var(--bestcv-success);
}

.resume-save-status-pill.is-saved {
    background: var(--bestcv-success-soft);
}

.resume-save-status-pill.is-failed,
.resume-ats-inline-error {
    color: var(--bestcv-danger);
}

.resume-save-status-pill.is-failed {
    background: var(--bestcv-danger-soft);
}

.resume-rail-btn,
.resume-rail-btn i,
.resume-stepper span,
.resume-drawer-body .form-control,
.resume-drawer-body .form-select {
    color: var(--bestcv-text);
}

.resume-rail-btn.is-active {
    border-left-color: var(--bestcv-primary);
    background: var(--bestcv-terracotta);
    color: var(--bestcv-ivory);
}

.resume-rail-btn.is-active i {
    color: var(--bestcv-ivory);
}

.resume-drawer {
    background: color-mix(in srgb, var(--bestcv-surface) 74%, var(--bestcv-surface-soft));
    box-shadow: 0.65rem 0 1.25rem color-mix(in srgb, var(--bestcv-primary-dark) 4%, transparent);
}

.resume-drawer-body .form-control,
.resume-drawer-body .form-select,
.resume-experience-card,
.resume-template-card,
.resume-template-card-media,
.resume-template-filter,
.resume-modal-header,
.resume-editor-section {
    border-color: var(--bestcv-border);
}

.resume-drawer-body .form-control:focus,
.resume-drawer-body .form-select:focus {
    border-color: var(--bestcv-ai);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--bestcv-ai) 16%, transparent);
}

.resume-canvas-area {
    background-color: var(--bestcv-surface-soft);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--bestcv-primary) 23%, var(--bestcv-surface-soft)) 1px, transparent 1.1px);
}

.resume-preview-page {
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--bestcv-primary-dark) 15%, transparent);
}

.resume-ai-guide,
.resume-ai-dialog-intro,
.resume-ats-barma-intro,
.resume-ai-suggestion,
.resume-skill-suggestion-chip {
    border-color: color-mix(in srgb, var(--bestcv-ai) 28%, var(--bestcv-border));
    background: var(--bestcv-ai-soft);
}

.resume-ai-guide-eyebrow,
.resume-ats-barma-intro span,
.resume-ats-priorities-label,
.resume-ai-suggestion-label,
.resume-skill-suggestion-add,
.resume-ats-score {
    color: var(--bestcv-ai);
}

.resume-ai-guide p,
.resume-ai-dialog-intro p,
.resume-ats-barma-intro p,
.resume-ats-summary,
.resume-skill-suggestion-chip {
    color: var(--bestcv-text-muted);
}

.resume-ai-guide p strong {
    color: var(--bestcv-primary-dark);
}

.resume-skill-suggestion-add:hover {
    background: var(--bestcv-ai);
}

.resume-template-card.is-current,
.resume-template-filter.is-active {
    border-color: var(--bestcv-primary);
}

.resume-template-card.is-current {
    box-shadow: 0 0 0 1px var(--bestcv-primary);
}

.resume-template-card-flag.is-current,
.resume-template-filter.is-active {
    background: var(--bestcv-primary);
}

.resume-template-card:focus-visible {
    outline-color: var(--bestcv-primary);
}

.resume-ats-score-badge {
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.resume-ats-issue {
    border-left-color: var(--bestcv-border);
    background: var(--bestcv-surface-soft);
}

.resume-ats-issue-high {
    border-left-color: var(--bestcv-danger);
    background: var(--bestcv-danger-soft);
}

.resume-ats-issue-medium {
    border-left-color: var(--bestcv-gold);
    background: var(--bestcv-gold-soft);
}

@media (max-width: 767.98px) {
    .resume-rail {
        background: color-mix(in srgb, var(--bestcv-surface) 96%, var(--bestcv-surface-soft));
    }

    .resume-rail-btn.is-active {
        border-top-color: var(--bestcv-primary);
    }

    .resume-drawer {
        background: var(--bestcv-surface);
    }
}