@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    --yn-primary: #022D38;
    --yn-secondary: #2F6B6D;
    --yn-background: #F4F1EA;
    --yn-accent: #B89A3E;
    --yn-neutral: #D9D9D9;
    --yn-surface: #FBFAF6;
    --yn-surface-soft: #EFEAE0;
    --yn-text: #022D38;
    --yn-text-muted: #5E6E6E;
    --yn-text-soft: #7B8584;
    --yn-border: #D9D9D9;
    --yn-border-soft: rgba(2, 45, 56, 0.12);
    --yn-focus: rgba(184, 154, 62, 0.32);
    --yn-danger: #9F3A38;
    --yn-success: #3C7560;

    --yn-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --yn-radius-sm: 6px;
    --yn-radius-md: 8px;
    --yn-radius-lg: 12px;
    --yn-radius-xl: 18px;

    --yn-shadow-xs: 0 1px 2px rgba(2, 45, 38, 0.04);
    --yn-shadow-sm: 0 10px 28px rgba(2, 45, 56, 0.07);

    --yn-space-1: 0.25rem;
    --yn-space-2: 0.5rem;
    --yn-space-3: 0.75rem;
    --yn-space-4: 1rem;
    --yn-space-5: 1.5rem;
    --yn-space-6: 2rem;
    --yn-space-7: 3rem;
    --yn-space-8: 4.5rem;
    --yn-space-9: 6rem;

    --bs-primary: var(--yn-primary);
    --bs-primary-rgb: 2, 45, 56;
    --bs-secondary: var(--yn-secondary);
    --bs-secondary-rgb: 47, 107, 109;
    --bs-body-bg: var(--yn-background);
    --bs-body-color: var(--yn-text);
    --bs-border-color: var(--yn-border);
    --bs-link-color: var(--yn-secondary);
    --bs-link-hover-color: var(--yn-primary);
    --bs-focus-ring-color: var(--yn-focus);
    --bs-font-sans-serif: var(--yn-font-sans);
}

html {
    min-height: 100%;
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100%;
    background: var(--yn-background);
    color: var(--yn-text);
    font-family: var(--yn-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(184, 154, 62, 0.24);
    color: var(--yn-primary);
}

a {
    color: var(--yn-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover,
a:focus {
    color: var(--yn-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--yn-primary);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.12;
}

h1,
.h1 {
    font-size: clamp(2.35rem, 5vw, 4.6rem);
}

h2,
.h2 {
    font-size: clamp(1.9rem, 3.4vw, 3.2rem);
}

h3,
.h3 {
    font-size: clamp(1.45rem, 2.4vw, 2.1rem);
}

p {
    margin-bottom: 1rem;
}

.lead {
    color: var(--yn-text-muted);
    font-size: 1.12rem;
    line-height: 1.75;
}

.text-primary {
    color: var(--yn-primary) !important;
}

.text-secondary {
    color: var(--yn-text-muted) !important;
}

.text-accent {
    color: var(--yn-accent) !important;
}

.text-soft {
    color: var(--yn-text-soft) !important;
}

.bg-primary {
    background-color: var(--yn-primary) !important;
}

.bg-secondary {
    background-color: var(--yn-secondary) !important;
}

.bg-light,
.bg-body-tertiary {
    background-color: var(--yn-surface-soft) !important;
}

.bg-white {
    background-color: var(--yn-surface) !important;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--yn-border-soft) !important;
}

.container {
    max-width: 1160px;
}

.yn-container-narrow {
    max-width: 760px;
}

.yn-container-readable {
    max-width: 680px;
}

.yn-section {
    padding: var(--yn-space-8) 0;
}

.yn-section-sm {
    padding: var(--yn-space-7) 0;
}

.yn-section-lg {
    padding: var(--yn-space-9) 0;
}

.yn-stack-xs > * + * {
    margin-top: var(--yn-space-2);
}

.yn-stack-sm > * + * {
    margin-top: var(--yn-space-3);
}

.yn-stack > * + * {
    margin-top: var(--yn-space-5);
}

.yn-stack-lg > * + * {
    margin-top: var(--yn-space-7);
}

.yn-eyebrow {
    color: var(--yn-secondary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: var(--yn-space-3);
    text-transform: uppercase;
}

.yn-page-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--yn-border-soft);
    border-radius: 999px;
    background: rgba(251, 250, 246, 0.72);
    color: var(--yn-primary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.yn-muted-rule {
    border-top: 1px solid var(--yn-border-soft);
}

.btn {
    --bs-btn-border-radius: var(--yn-radius-md);
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: 0.72rem;
    --bs-btn-font-weight: 700;
    min-height: 2.75rem;
    letter-spacing: 0;
    box-shadow: none !important;
}

.btn-sm {
    --bs-btn-padding-x: 0.8rem;
    --bs-btn-padding-y: 0.42rem;
    min-height: 2.15rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-padding-y: 0.88rem;
    min-height: 3.25rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--yn-primary);
    --bs-btn-border-color: var(--yn-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #06404E;
    --bs-btn-hover-border-color: #06404E;
    --bs-btn-active-bg: #011E26;
    --bs-btn-active-border-color: #011E26;
    --bs-btn-disabled-bg: rgba(2, 45, 56, 0.44);
    --bs-btn-disabled-border-color: transparent;
    background-color: var(--yn-primary) !important;
    border-color: var(--yn-primary) !important;
    color: #fff !important;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--yn-secondary);
    --bs-btn-border-color: var(--yn-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #285D5F;
    --bs-btn-hover-border-color: #285D5F;
    background-color: var(--yn-secondary) !important;
    border-color: var(--yn-secondary) !important;
    color: #fff !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--yn-primary);
    --bs-btn-border-color: rgba(2, 45, 56, 0.36);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--yn-primary);
    --bs-btn-hover-border-color: var(--yn-primary);
    border-color: rgba(2, 45, 56, 0.36) !important;
    color: var(--yn-primary) !important;
}

.btn-outline-secondary {
    --bs-btn-color: var(--yn-secondary);
    --bs-btn-border-color: rgba(47, 107, 109, 0.34);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--yn-secondary);
    --bs-btn-hover-border-color: var(--yn-secondary);
    border-color: rgba(47, 107, 109, 0.34) !important;
    color: var(--yn-secondary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #06404E !important;
    border-color: #06404E !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #285D5F !important;
    border-color: #285D5F !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--yn-primary) !important;
    border-color: var(--yn-primary) !important;
    color: #fff !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--yn-secondary) !important;
    border-color: var(--yn-secondary) !important;
    color: #fff !important;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-finish:disabled,
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled,
.btn.disabled {
    background-color: rgba(2, 45, 56, 0.2) !important;
    border-color: rgba(2, 45, 56, 0.08) !important;
    color: rgba(2, 45, 56, 0.46) !important;
}

.btn-accent {
    --bs-btn-color: var(--yn-primary);
    --bs-btn-bg: var(--yn-accent);
    --bs-btn-border-color: var(--yn-accent);
    --bs-btn-hover-color: var(--yn-primary);
    --bs-btn-hover-bg: #C5A94E;
    --bs-btn-hover-border-color: #C5A94E;
}

.btn-finish {
    --bs-btn-color: #fff;
    --bs-btn-bg: #9F3A38;
    --bs-btn-border-color: #9F3A38;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7F2D2C;
    --bs-btn-hover-border-color: #7F2D2C;
    --bs-btn-active-bg: #642322;
    --bs-btn-active-border-color: #642322;
    min-width: 9.5rem;
    background-color: #9F3A38 !important;
    border-color: #9F3A38 !important;
    color: #fff !important;
    box-shadow: 0 0.85rem 1.8rem rgba(159, 58, 56, 0.22);
}

.btn-finish:hover,
.btn-finish:focus {
    background-color: #7F2D2C !important;
    border-color: #7F2D2C !important;
    color: #fff !important;
}

.btn-link {
    color: var(--yn-secondary);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
    border-color: var(--yn-accent);
    box-shadow: 0 0 0 0.2rem var(--yn-focus) !important;
}

.form-label {
    color: var(--yn-primary);
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}

.form-text {
    color: var(--yn-text-soft);
    font-size: 0.88rem;
}

.form-control,
.form-select {
    min-height: 3rem;
    border-color: var(--yn-border);
    border-radius: var(--yn-radius-md);
    background-color: var(--yn-surface);
    color: var(--yn-primary);
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.78rem 0.95rem;
}

.form-control::placeholder {
    color: rgba(2, 45, 56, 0.42);
}

textarea.form-control {
    min-height: 9rem;
    resize: vertical;
}

.input-group-text {
    border-color: var(--yn-border);
    background: var(--yn-surface-soft);
    color: var(--yn-text-muted);
    font-weight: 600;
}

.form-check-input {
    border-color: rgba(2, 45, 56, 0.34);
}

.form-check-input:checked {
    background-color: var(--yn-secondary) !important;
    border-color: var(--yn-secondary) !important;
}

.form-check-input[type="radio"]:checked {
    background-image: radial-gradient(circle, #fff 0 38%, transparent 42%);
}

.form-range::-webkit-slider-thumb {
    background: var(--yn-secondary);
}

.form-range::-moz-range-thumb {
    background: var(--yn-secondary);
}

.form-range::-webkit-slider-runnable-track {
    background-color: rgba(2, 45, 56, 0.12);
}

.form-range::-moz-range-track {
    background-color: rgba(2, 45, 56, 0.12);
}

.yn-form-panel {
    max-width: 520px;
    padding: var(--yn-space-6);
    border: 1px solid var(--yn-border-soft);
    border-radius: var(--yn-radius-lg);
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-xs);
}

.progress {
    height: 0.58rem;
    border-radius: 999px;
    background-color: rgba(2, 45, 56, 0.1);
    overflow: hidden;
}

.progress-bar {
    border-radius: inherit;
    background-color: var(--yn-secondary) !important;
}

.yn-progress-accent .progress-bar {
    background-color: var(--yn-accent) !important;
}

.yn-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--yn-space-4);
    margin-bottom: var(--yn-space-2);
    color: var(--yn-text-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.navbar {
    --bs-navbar-color: var(--yn-primary);
    --bs-navbar-hover-color: var(--yn-secondary);
    --bs-navbar-active-color: var(--yn-primary);
    min-height: 4.5rem;
    background: rgba(244, 241, 234, 0.94) !important;
    backdrop-filter: blur(8px);
}

.navbar-brand {
    color: var(--yn-primary) !important;
    font-weight: 800;
    letter-spacing: 0;
}

.nav-link {
    color: var(--yn-text-muted);
    font-weight: 700;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--yn-primary);
}

.card,
.yn-card {
    border: 1px solid var(--yn-border-soft);
    border-radius: var(--yn-radius-lg);
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-xs);
    color: var(--yn-primary);
}

.card-header,
.card-footer {
    border-color: var(--yn-border-soft);
    background: transparent;
}

.yn-card {
    padding: var(--yn-space-6);
}

.yn-card-quiet {
    border-color: rgba(2, 45, 56, 0.08);
    background: rgba(251, 250, 246, 0.66);
    box-shadow: none;
}

.yn-card-title {
    margin-bottom: var(--yn-space-2);
    font-size: 1.25rem;
}

.yn-card-text {
    color: var(--yn-text-muted);
    margin-bottom: 0;
}

.badge {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0;
}

.text-bg-primary,
.badge.bg-primary {
    background-color: var(--yn-primary) !important;
    color: #fff !important;
}

.text-bg-secondary,
.badge.bg-secondary {
    background-color: var(--yn-secondary) !important;
    color: #fff !important;
}

.text-bg-warning {
    background-color: rgba(184, 154, 62, 0.2) !important;
    color: var(--yn-primary) !important;
}

.text-bg-light {
    background: rgba(251, 250, 246, 0.74) !important;
    color: var(--yn-primary) !important;
}

.alert {
    border-radius: var(--yn-radius-md);
    border-color: var(--yn-border-soft);
}

.alert-info {
    background: rgba(47, 107, 109, 0.08);
    color: var(--yn-primary);
}

.alert-warning {
    background: rgba(184, 154, 62, 0.12);
    color: var(--yn-primary);
}

.table {
    --bs-table-color: var(--yn-primary);
    --bs-table-border-color: var(--yn-border-soft);
}

.yn-divider {
    width: 100%;
    height: 1px;
    background: var(--yn-border-soft);
}

.yn-soft-panel {
    border: 1px solid var(--yn-border-soft);
    border-radius: var(--yn-radius-lg);
    background: rgba(251, 250, 246, 0.58);
}

.yn-status-dot {
    display: inline-block;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: var(--yn-secondary);
    box-shadow: 0 0 0 0.34rem rgba(47, 107, 109, 0.12);
}

@media (max-width: 767.98px) {
    body {
        font-size: 0.98rem;
    }

    .lead {
        font-size: 1.04rem;
    }

    .yn-section {
        padding: var(--yn-space-7) 0;
    }

    .yn-section-lg {
        padding: var(--yn-space-8) 0;
    }

    .yn-card,
    .yn-form-panel {
        padding: var(--yn-space-5);
    }

    .navbar {
        min-height: 4rem;
    }
}