:root {
    --lippe-blue: #006AAB;
    --lippe-blue-light: #B7CCE7;
    --lippe-deep-blue: #1C2740;
    --lippe-orange: #E58434;
    --lippe-apricot: #FFD9A0;
    --lippe-cream: #FFF2E2;
    --lippe-surface: #FFFDF9;
    --lippe-border: rgba(28, 39, 64, 0.12);
    --lippe-shadow: 0 18px 48px rgba(28, 39, 64, 0.08);
    --font-heading: "Outfit", sans-serif;
    --font-body: "Instrument Sans", sans-serif;
}

html {
    font-family: var(--font-body);
    color: var(--lippe-deep-blue);
    background:
        radial-gradient(circle at top left, rgba(183, 204, 231, 0.4), transparent 32rem),
        linear-gradient(180deg, #fffdf9 0%, var(--lippe-cream) 100%);
}

body.app-shell {
    min-height: 100vh;
    color: var(--lippe-deep-blue);
}

h1, h2, h3, h4, h5, h6,
.font-brand-heading {
    font-family: var(--font-heading);
}

.brand-panel {
    border: 1px solid var(--lippe-border);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--lippe-shadow);
    backdrop-filter: blur(14px);
}

.brand-focus:focus-visible {
    outline: 3px solid rgba(229, 132, 52, 0.35);
    outline-offset: 3px;
}

.brand-button-primary {
    background: var(--lippe-blue);
    color: #fff;
}

.brand-button-primary:hover {
    background: #005586;
}

.brand-button-accent {
    background: var(--lippe-orange);
    color: var(--lippe-deep-blue);
}

.brand-button-accent:hover {
    background: #cf6d1a;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.brand-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(28, 39, 64, 0.08);
    background: rgba(255, 242, 226, 0.88);
    backdrop-filter: blur(18px);
}

.brand-nav__link {
    color: var(--lippe-deep-blue);
    font-weight: 600;
}

.brand-nav__link:hover,
.brand-nav__link:focus-visible {
    color: var(--lippe-blue);
}

.brand-footer {
    border-top: 1px solid rgba(28, 39, 64, 0.08);
    background: rgba(255, 255, 255, 0.86);
}

.brand-topics-shell {
    overflow: hidden;
    border-radius: 2rem;
    background:
        linear-gradient(135deg, rgba(255, 242, 226, 0.94), rgba(255, 255, 255, 0.94)),
        rgba(255, 255, 255, 0.9);
}

.brand-section-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--lippe-blue);
}

.brand-filter-button {
    border: 1px solid rgba(0, 106, 171, 0.14);
    background: rgba(183, 204, 231, 0.24);
    color: var(--lippe-deep-blue);
}

.brand-launch-panel {
    background:
        linear-gradient(180deg, rgba(183, 204, 231, 0.2), rgba(255, 217, 160, 0.22)),
        rgba(255, 255, 255, 0.72);
}

.brand-stepper-card {
    border-radius: 1.5rem;
    padding: 1.5rem;
}

.brand-progress-step {
    display: flex;
    height: 2.75rem;
    width: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.brand-progress-step--current {
    background: var(--lippe-blue);
    color: #fff;
}

.brand-progress-step--complete {
    background: var(--lippe-orange);
    color: #fff;
}

.brand-progress-step--upcoming {
    background: rgba(183, 204, 231, 0.32);
    color: var(--lippe-deep-blue);
}

.brand-progress-label {
    color: rgba(28, 39, 64, 0.64);
}

.brand-progress-label--current {
    color: var(--lippe-blue);
}

.brand-workflow-banner {
    border-radius: 1.5rem;
    padding: 1.5rem;
}

.brand-workflow-banner--review {
    background: linear-gradient(135deg, rgba(183, 204, 231, 0.42), rgba(255, 242, 226, 0.94));
}

.brand-workflow-banner--production {
    background: linear-gradient(135deg, rgba(183, 204, 231, 0.32), rgba(255, 217, 160, 0.34));
}

.brand-workflow-banner--qa {
    background: linear-gradient(135deg, rgba(255, 217, 160, 0.28), rgba(255, 255, 255, 0.94));
}