/*
   Portfolio-wide light art direction.
   This file deliberately loads after page-level Razor styles so the older project pages
   share the same editorial system without rewriting their working markup.
*/

:root {
    --bg: var(--paper) !important;
    --bg-2: var(--paper-deep) !important;
    --panel: rgba(251, 250, 246, 0.94) !important;
    --panel-strong: #fbfaf6 !important;
    --line: rgba(19, 34, 29, 0.16) !important;
    --line-strong: rgba(19, 34, 29, 0.3) !important;
    --text: #13221d !important;
    --muted: #718078 !important;
    --soft: #42554d !important;
    --accent: #1557ff !important;
    --accent-2: #ff7043 !important;
    --accent-3: #24a46d !important;
    --warning: #b36a00 !important;
    --danger: #c23b50 !important;
    --shadow: 0 18px 60px rgba(30, 47, 40, 0.09) !important;
}

body:not(.route-home) {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
    color: var(--ink) !important;
    background:
        linear-gradient(rgba(19, 34, 29, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 34, 29, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 4% 8%, rgba(185, 239, 216, 0.55), transparent 24rem),
        var(--paper) !important;
    background-size: 34px 34px, 34px 34px, auto, auto !important;
    font-family: "Instrument Sans", "Segoe UI", sans-serif !important;
}

body:not(.route-home)::before {
    background:
        radial-gradient(circle at 95% 10%, rgba(21, 87, 255, 0.08), transparent 28rem),
        radial-gradient(circle at 10% 85%, rgba(255, 214, 107, 0.12), transparent 30rem) !important;
}

body:not(.route-home) .page,
body:not(.route-home) .container-case,
body:not(.route-home) .container-journey {
    width: min(1280px, calc(100% - 40px)) !important;
}

body:not(.route-home) .page {
    padding-top: 126px !important;
    padding-bottom: 100px !important;
}

body:not(.route-home) .case-page,
body:not(.route-home) .journey-page {
    position: relative;
    z-index: 1;
    color: var(--ink) !important;
}

body:not(.route-home) .case-page .hero,
body:not(.route-home) .journey-page .hero {
    padding-top: 126px !important;
}

body:not(.route-home) .hero::before,
body:not(.route-home) .hero::after,
body:not(.route-home) .section-card::before {
    opacity: 0.32 !important;
    filter: none !important;
}

/* Shared editorial surfaces */
body:not(.route-home) .hero,
body:not(.route-home) .section,
body:not(.route-home) .section-card,
body:not(.route-home) .flagship,
body:not(.route-home) .card,
body:not(.route-home) .quote,
body:not(.route-home) .cta,
body:not(.route-home) .feature-card,
body:not(.route-home) .timeline-card,
body:not(.route-home) .project-highlight,
body:not(.route-home) .info-card,
body:not(.route-home) .stat-card,
body:not(.route-home) .band-card,
body:not(.route-home) .roadmap-card,
body:not(.route-home) .proof-card,
body:not(.route-home) .result-card,
body:not(.route-home) .closing-card,
body:not(.route-home) .quote-block,
body:not(.route-home) .pdf-card,
body:not(.route-home) .download-panel,
body:not(.route-home) .architecture-shell,
body:not(.route-home) .stack-board,
body:not(.route-home) .growth-bars,
body:not(.route-home) .chart-proof-wrap,
body:not(.route-home) .project {
    border-color: var(--line-strong) !important;
    background: rgba(251, 250, 246, 0.94) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.route-home) .hero,
body:not(.route-home) .flagship,
body:not(.route-home) .section,
body:not(.route-home) .section-card,
body:not(.route-home) .cta,
body:not(.route-home) .closing-card {
    border-radius: 26px !important;
}

body:not(.route-home) .feature-card,
body:not(.route-home) .timeline-card,
body:not(.route-home) .info-card,
body:not(.route-home) .stat-card,
body:not(.route-home) .band-card,
body:not(.route-home) .roadmap-card,
body:not(.route-home) .proof-card,
body:not(.route-home) .result-card,
body:not(.route-home) .quote-block,
body:not(.route-home) .meta-card,
body:not(.route-home) .mini,
body:not(.route-home) .project {
    border-radius: 18px !important;
}

body:not(.route-home) .hero,
body:not(.route-home) .section,
body:not(.route-home) .section-card,
body:not(.route-home) .flagship {
    position: relative;
    overflow: hidden;
}

body:not(.route-home) .hero::after,
body:not(.route-home) .section-card::after,
body:not(.route-home) .flagship::after {
    position: absolute;
    z-index: 0;
    top: 17px;
    right: 20px;
    color: rgba(19, 34, 29, 0.18);
    content: "SYSTEM / LUKAS SLIVKA";
    font-family: "DM Mono", monospace;
    font-size: 0.55rem;
    letter-spacing: 0.09em;
    pointer-events: none;
}

body:not(.route-home) .hero > *,
body:not(.route-home) .section-card > *,
body:not(.route-home) .flagship > * {
    position: relative;
    z-index: 1;
}

/* Typography */
body:not(.route-home) h1,
body:not(.route-home) h2,
body:not(.route-home) .section-title,
body:not(.route-home) .fancy-title {
    color: var(--ink) !important;
    font-family: "Newsreader", Georgia, serif !important;
    font-weight: 560 !important;
    letter-spacing: -0.048em !important;
}

body:not(.route-home) h3,
body:not(.route-home) h4,
body:not(.route-home) strong {
    color: var(--ink);
}

body:not(.route-home) .gradient,
body:not(.route-home) .gradient-text,
body:not(.route-home) .grad,
body:not(.route-home) .hero h1 .grad,
body:not(.route-home) .proof-metric strong,
body:not(.route-home) .result-card h3 {
    background: none !important;
    color: var(--signal) !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

body:not(.route-home) p,
body:not(.route-home) .lead,
body:not(.route-home) .section-text,
body:not(.route-home) .card p,
body:not(.route-home) .quote p,
body:not(.route-home) .cta p,
body:not(.route-home) .project-copy p,
body:not(.route-home) .feature-card p,
body:not(.route-home) .timeline-card p,
body:not(.route-home) .info-card p,
body:not(.route-home) .result-card p,
body:not(.route-home) .quote-block p {
    color: var(--ink-soft) !important;
}

body:not(.route-home) .eyebrow,
body:not(.route-home) .section-kicker,
body:not(.route-home) .tag,
body:not(.route-home) .timeline-step,
body:not(.route-home) .label,
body:not(.route-home) .stat-label,
body:not(.route-home) .metric-label {
    color: var(--signal) !important;
    font-family: "DM Mono", monospace !important;
    font-weight: 500 !important;
    letter-spacing: 0.075em !important;
    text-transform: uppercase !important;
}

body:not(.route-home) .eyebrow,
body:not(.route-home) .section-kicker,
body:not(.route-home) .tag {
    border: 1px solid rgba(21, 87, 255, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(21, 87, 255, 0.055) !important;
}

body:not(.route-home) .eyebrow::before,
body:not(.route-home) .section-kicker::before {
    background: var(--signal) !important;
    box-shadow: none !important;
}

body:not(.route-home) .hero-points li,
body:not(.route-home) .bullet-list li,
body:not(.route-home) .chips .chip,
body:not(.route-home) .chip,
body:not(.route-home) .hero-badges li,
body:not(.route-home) .closing-tags span {
    border-color: var(--line-strong) !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
}

/* Buttons and links */
body:not(.route-home) .btn-main,
body:not(.route-home) .btn-primary-journey,
body:not(.route-home) .btn-primary-case {
    border: 1px solid var(--ink) !important;
    border-radius: 12px !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(19, 34, 29, 0.12) !important;
}

body:not(.route-home) .btn-main:hover,
body:not(.route-home) .btn-primary-journey:hover,
body:not(.route-home) .btn-primary-case:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
}

body:not(.route-home) .btn-ghost,
body:not(.route-home) .btn-secondary-journey,
body:not(.route-home) .btn-secondary-case {
    border: 1px solid var(--line-strong) !important;
    border-radius: 12px !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
}

body:not(.route-home) .text-link,
body:not(.route-home) .link-row a,
body:not(.route-home) .back-link {
    color: var(--signal) !important;
    text-shadow: none !important;
}

body:not(.route-home) .text-link:hover,
body:not(.route-home) .link-row a:hover,
body:not(.route-home) .back-link:hover {
    color: var(--ink) !important;
}

/* About / Projects / QRelia overview */
.route-about-index .hero,
.route-projects-index .hero,
.route-projects-qrelia-index .hero {
    border-top: 4px solid var(--signal) !important;
}

.route-about-index .hero-visual,
.route-projects-index .flagship-art,
.route-projects-qrelia-index .hero-art {
    border: 1px solid var(--ink) !important;
    box-shadow: 10px 11px 0 var(--mint) !important;
    filter: saturate(0.74) !important;
}

.route-about-index .hero-visual::after,
.route-projects-index .flagship-art::after,
.route-projects-qrelia-index .hero-art::after {
    background: linear-gradient(180deg, transparent 45%, rgba(19, 34, 29, 0.78) 100%) !important;
}

.route-about-index .hero-note,
.route-projects-index .flagship-note,
.route-projects-qrelia-index .hero-note {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(19, 34, 29, 0.78) !important;
    color: #fff !important;
    backdrop-filter: blur(8px) !important;
}

.route-about-index .hero-note span,
.route-projects-index .flagship-note,
.route-projects-qrelia-index .hero-note span {
    color: rgba(255, 255, 255, 0.78) !important;
}

.route-about-index .grid .card,
.route-projects-qrelia-index .features .feature,
.route-projects-index .meta-card {
    border-left: 3px solid var(--mint) !important;
}

.route-projects-index .project-grid {
    gap: 20px !important;
}

.route-projects-index .project {
    overflow: hidden;
    border: 1px solid var(--ink) !important;
    box-shadow: none !important;
}

.route-projects-index .project-media {
    border-color: var(--line-strong) !important;
    filter: saturate(0.72) !important;
}

.route-projects-index .project:hover {
    box-shadow: 8px 9px 0 var(--mint) !important;
    transform: translate(-2px, -2px);
}

.route-projects-qrelia-index .feature-icon,
.route-about-index .card .label,
.route-projects-index .meta-card h3 {
    color: var(--signal) !important;
}

/* Journey and QRelia case study */
.route-journey-index .hero-copy,
.route-journey-index .hero-side,
.route-projects-qrelia-casestudy .hero-copy,
.route-projects-qrelia-casestudy .hero-side {
    border: 1px solid var(--ink) !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-soft) !important;
    backdrop-filter: none !important;
}

.route-journey-index .hero-side,
.route-projects-qrelia-casestudy .hero-side {
    box-shadow: 11px 12px 0 var(--mint) !important;
}

.route-journey-index .pdf-hero-frame,
.route-projects-qrelia-casestudy .hero-card-top {
    border: 1px solid var(--ink) !important;
    background:
        linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
        var(--signal) !important;
    background-size: 24px 24px !important;
}

.route-journey-index .meta-box,
.route-projects-qrelia-casestudy .meta-box,
.route-projects-qrelia-casestudy .panel-mini,
.route-projects-qrelia-casestudy .signal-item {
    border-color: var(--line-strong) !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
}

.route-journey-index .meta-box .value,
.route-projects-qrelia-casestudy .meta-box .value,
.route-projects-qrelia-casestudy .metric-big,
.route-projects-qrelia-casestudy .signal-item strong {
    color: var(--ink) !important;
}

.route-journey-index .timeline::before,
.route-projects-qrelia-casestudy .timeline::before {
    background: var(--line-strong) !important;
}

.route-journey-index .timeline-dot,
.route-projects-qrelia-casestudy .timeline-dot {
    border-color: var(--paper) !important;
    background: var(--signal) !important;
    box-shadow: 0 0 0 1px var(--ink) !important;
}

.route-journey-index .capability-table,
.route-projects-qrelia-casestudy .stack-layers {
    border-color: var(--ink) !important;
    background: var(--paper-bright) !important;
}

.route-journey-index .capability-row,
.route-journey-index .capability-cell,
.route-projects-qrelia-casestudy .stack-layer {
    border-color: var(--line-strong) !important;
    background: transparent !important;
    color: var(--ink-soft) !important;
}

.route-projects-qrelia-casestudy .tag-live,
.route-projects-qrelia-casestudy .tag-processing,
.route-projects-qrelia-casestudy .tag-complete,
.route-projects-qrelia-casestudy .tag-pending {
    border: 1px solid var(--line-strong) !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
}

.route-projects-qrelia-casestudy .growth-track {
    background: var(--paper-deep) !important;
}

.route-projects-qrelia-casestudy .growth-fill {
    background: linear-gradient(90deg, var(--signal), #24a46d) !important;
}

.route-projects-qrelia-casestudy .achievement-badge {
    border-color: rgba(36, 164, 109, 0.38) !important;
    background: rgba(185, 239, 216, 0.48) !important;
    color: #176d4a !important;
}

.route-projects-qrelia-casestudy .garin-image-wrap,
.route-projects-qrelia-casestudy .chart-proof-wrap {
    border: 1px solid var(--ink) !important;
    background: var(--paper-bright) !important;
    box-shadow: 9px 10px 0 var(--mint) !important;
}

/* Legacy project detail pages */
.projects-section {
    min-height: 100vh !important;
    padding: 130px 0 100px !important;
    background:
        radial-gradient(circle at 5% 8%, rgba(185, 239, 216, 0.5), transparent 24rem),
        var(--paper) !important;
    color: var(--ink) !important;
}

.projects-section .fancy-title {
    display: inline-flex !important;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px !important;
    background: none !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    font-size: clamp(3rem, 7vw, 6.8rem) !important;
    line-height: 0.9 !important;
}

.projects-section .section-subtitle {
    max-width: 880px !important;
    color: var(--ink-soft) !important;
    font-size: 1.08rem !important;
    line-height: 1.7 !important;
}

.projects-section .description-box {
    max-width: 1040px !important;
    margin-top: 42px !important;
    padding: clamp(24px, 4vw, 48px) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 22px !important;
    background: var(--paper-bright) !important;
    color: var(--ink-soft) !important;
    box-shadow: 10px 11px 0 var(--mint) !important;
}

.projects-section .description-box label,
.projects-section .description-box .text-info,
.projects-section .description-box .text-warning {
    color: var(--signal) !important;
    font-weight: 700 !important;
}

.projects-section .btn-custom {
    min-height: 54px;
    border: 1px solid var(--ink) !important;
    border-radius: 12px !important;
    background: var(--ink) !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.projects-section .btn-custom:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
    color: #fff !important;
}

.projects-section .screenshot-card {
    padding: 10px !important;
    border: 1px solid var(--ink) !important;
    border-radius: 20px !important;
    background: var(--paper-bright) !important;
    box-shadow: 8px 9px 0 var(--paper-deep) !important;
}

.projects-section .screenshot-card:hover {
    box-shadow: 10px 11px 0 var(--mint) !important;
    transform: translate(-2px, -2px) !important;
}

.projects-section .screenshot-card img {
    filter: saturate(0.78) !important;
}

.projects-section .screenshot-card:hover img {
    filter: saturate(1) !important;
}

.projects-section .caption,
.projects-section .caption-text {
    color: var(--ink-soft) !important;
}

/* Bootstrap-heavy project pages */
.studio-main .text-light {
    color: var(--ink) !important;
}

.studio-main .text-muted {
    color: var(--ink-muted) !important;
}

.studio-main .text-info {
    color: var(--signal) !important;
}

.studio-main .text-warning {
    color: #a55d00 !important;
}

.studio-main .bg-dark,
.studio-main .card.bg-dark {
    border-color: var(--line-strong) !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
}

.studio-main .card {
    border-color: var(--line-strong);
}

.studio-main .btn-primary {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
}

.studio-main .btn-outline-secondary,
.studio-main .btn-outline-dark {
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
}

.studio-main .btn-outline-secondary:hover,
.studio-main .btn-outline-dark:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
    color: #fff !important;
}

/* Cycling page */
.route-cycling-index .parallax-section {
    min-height: 680px !important;
    height: 82vh !important;
    background:
        linear-gradient(rgba(19, 34, 29, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 34, 29, 0.08) 1px, transparent 1px),
        var(--mint) !important;
    background-size: 32px 32px !important;
}

.route-cycling-index .parallax-section .overlay {
    background: transparent !important;
    opacity: 1 !important;
}

.route-cycling-index .parallax-section h1 {
    border: 1px solid var(--ink) !important;
    border-right-width: 12px !important;
    border-left-width: 12px !important;
    border-radius: 0 !important;
    background: var(--paper-bright);
    color: var(--ink) !important;
}

.route-cycling-index .arrow {
    border-color: var(--ink) !important;
}

.route-cycling-index .card {
    box-shadow: 8px 9px 0 var(--paper-deep) !important;
}

/* Robotics landing */
.route-robotics-index .studio-main,
.route-robotics-landing .studio-main {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 120px 20px 70px;
}

.route-robotics-index .robotic-page,
.route-robotics-landing .intro-content {
    max-width: 760px;
    padding: clamp(30px, 6vw, 70px) !important;
    border: 1px solid var(--ink) !important;
    border-radius: 24px !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
    box-shadow: 12px 13px 0 var(--mint) !important;
}

.route-robotics-index .robotic-page h1,
.route-robotics-index .robotic-page p,
.route-robotics-landing .intro-title,
.route-robotics-landing .intro-subtitle {
    color: var(--ink) !important;
}

.route-robotics-index .robotic-btn {
    border-color: var(--ink) !important;
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.route-robotics-index .robotic-btn:hover {
    border-color: var(--signal) !important;
    background: var(--signal) !important;
}

/* Old /Index2 page, kept coherent if it is still linked directly */
.route-index2 .hero-container,
.route-barbercore-index .studio-main > div {
    padding-top: 130px !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
}

.route-index2 .gradient-animation {
    background: var(--mint) !important;
    animation: none !important;
}

/* Forms / generic pages */
.route-privacy .studio-main,
.route-error .studio-main,
.route-barbercore-index .studio-main {
    width: min(960px, calc(100% - 30px));
    margin: 0 auto;
    padding: 130px 0 90px;
    color: var(--ink);
}

/* Remove dark utility artefacts inside content only */
.studio-main hr {
    border-color: var(--line-strong) !important;
    opacity: 1;
}

.studio-main code {
    border-radius: 5px;
    background: var(--paper-deep);
    color: var(--signal-dark);
}

@media (max-width: 900px) {
    body:not(.route-home) .page,
    body:not(.route-home) .container-case,
    body:not(.route-home) .container-journey {
        width: min(100% - 22px, 1280px) !important;
    }

    body:not(.route-home) .hero,
    body:not(.route-home) .section,
    body:not(.route-home) .section-card,
    body:not(.route-home) .flagship,
    body:not(.route-home) .hero-copy,
    body:not(.route-home) .hero-side {
        padding: 24px !important;
    }

    .projects-section {
        padding-top: 110px !important;
    }
}

@media (max-width: 620px) {
    body:not(.route-home) .page {
        padding-top: 102px !important;
    }

    body:not(.route-home) .case-page .hero,
    body:not(.route-home) .journey-page .hero {
        padding-top: 104px !important;
    }

    .projects-section .fancy-title {
        font-size: 3.1rem !important;
    }
}

.studio-main .projects-section .btn-custom,
.studio-main .projects-section .btn-custom.text-light,
.studio-main .projects-section a.btn-custom {
    color: #fff !important;
}

/* ShaBarber admin demo is presented as a light product artefact rather than a detached dark mock-up. */
.route-projects-shabarber-admin .studio-main {
    padding: 110px 0 80px;
}

.route-projects-shabarber-admin .shabarber-admin-demo {
    max-width: 1220px !important;
    margin: 28px auto !important;
    padding: 26px !important;
    color: var(--ink) !important;
}

.route-projects-shabarber-admin .topbar,
.route-projects-shabarber-admin .sidebar,
.route-projects-shabarber-admin .panel,
.route-projects-shabarber-admin .booking-card {
    border: 1px solid var(--line-strong) !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-card) !important;
}

.route-projects-shabarber-admin .topbar {
    border-radius: 18px !important;
    box-shadow: 8px 9px 0 var(--mint) !important;
}

.route-projects-shabarber-admin .brand-logo {
    border: 1px solid var(--ink);
    background: var(--acid) !important;
    color: var(--ink) !important;
}

.route-projects-shabarber-admin .nav-item {
    color: var(--ink-muted) !important;
}

.route-projects-shabarber-admin .nav-item.active {
    background: var(--ink) !important;
    color: #fff !important;
}

.route-projects-shabarber-admin .meta,
.route-projects-shabarber-admin [style*="color:var(--muted)"],
.route-projects-shabarber-admin footer {
    color: var(--ink-muted) !important;
}

.route-projects-shabarber-admin .calendar-preview,
.route-projects-shabarber-admin .detail-img {
    overflow: hidden;
    border: 1px solid var(--line-strong) !important;
}

.route-projects-shabarber-admin .booking-card button {
    border: 1px solid var(--ink) !important;
    background: var(--ink) !important;
    color: #fff !important;
}

.route-robotics-landing #intro {
    background:
        linear-gradient(rgba(19, 34, 29, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 34, 29, 0.045) 1px, transparent 1px),
        var(--paper) !important;
    background-size: 30px 30px !important;
}

.route-robotics-landing #main-title,
.route-robotics-landing #typing-text {
    color: var(--ink) !important;
    border-color: var(--signal) !important;
    text-shadow: none !important;
}

.route-robotics-landing .intro-content::before {
    display: block;
    margin-bottom: 18px;
    color: var(--signal);
    content: "LAB / ROBOTICS";
    font-family: "DM Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

.route-projects-barbercore-index .accordion-item,
.route-projects-barbercore-index .accordion-button,
.route-projects-barbercore-index .accordion-body {
    border-color: var(--line-strong) !important;
    background: var(--paper-bright) !important;
    color: var(--ink) !important;
}

.route-projects-barbercore-index .accordion-button:not(.collapsed) {
    background: var(--mint) !important;
    box-shadow: none !important;
}