/* Carbon theme – black bike / carbon fibre / mid lime + go-faster stripes */

:root[data-theme="carbon"] {
    --primary-orange: rgba(194, 220, 66, 0.4);
    --primary-red: rgba(194, 220, 66, 0.2);
    --accent-orange: #c2dc42;
    --accent-red: #a8c030;
    /* Labels: soft lime-tinted gray – readable, a bit of life */
    --dark-orange: #c8d4a8;
    --title-gradient: linear-gradient(135deg, #d4e86a, #d5dad6);

    --carbon-void: #070809;
    --carbon-panel: #111315;
    --carbon-panel-2: #171a1d;
    --carbon-edge: rgba(255, 255, 255, 0.09);
    --carbon-text: #d9ddd8;
    --carbon-muted: #9aa39c;
    /* Mid lime – between neon and dull sage */
    --volt: #c2dc42;
    --volt-dim: #a0b832;
    --volt-soft: rgba(194, 220, 66, 0.12);
    --volt-border: rgba(194, 220, 66, 0.32);
    /* Card / accent stripes (noticeable) */
    --stripe: rgba(194, 220, 66, 0.2);
    --stripe-strong: rgba(194, 220, 66, 0.32);
    --stripe-soft: rgba(194, 220, 66, 0.12);
    /* Page stripes – more subtle (half opacity again) */
    --stripe-page: rgba(194, 220, 66, 0.011);
    --stripe-page-mid: rgba(194, 220, 66, 0.0175);
    --stripe-page-soft: rgba(194, 220, 66, 0.0075);
}

/*
 * Go-faster stripe set (motorcycle fairing style):
 * thin / thick / thin parallel bands at a sweeping angle.
 */
body[data-theme="carbon"],
body[data-theme="carbon"].dark-mode {
    color: var(--carbon-text) !important;
    background-color: var(--carbon-void) !important;
    background-image:
        /* Large fairing stripes – very faded, atmosphere only */
        repeating-linear-gradient(
            -26deg,
            transparent 0 52px,
            var(--stripe-page-soft) 52px 56px,
            transparent 56px 62px,
            var(--stripe-page-mid) 62px 74px,
            transparent 74px 80px,
            var(--stripe-page) 80px 83px,
            transparent 83px 160px
        ),
        /* Carbon fibre weave */
        repeating-linear-gradient(
            60deg,
            rgba(255, 255, 255, 0.018) 0px,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 6px
        ),
        repeating-linear-gradient(
            -60deg,
            rgba(255, 255, 255, 0.014) 0px,
            rgba(255, 255, 255, 0.014) 1px,
            transparent 1px,
            transparent 6px
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 70% 42% at 50% -8%, rgba(194, 220, 66, 0.055), transparent 62%),
        radial-gradient(ellipse 90% 55% at 50% 115%, rgba(0, 0, 0, 0.65), transparent 70%),
        linear-gradient(165deg, #0a0c0e 0%, #101214 42%, #0b0d0f 100%) !important;
    background-attachment: fixed;
}

/* Cards: gloss panel (fairing stripes removed for now) */
body[data-theme="carbon"] .card,
body[data-theme="carbon"].dark-mode .card {
    position: relative;
    isolation: isolate;
    background-color: rgba(17, 19, 21, 0.92) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 45%);
    border: 1px solid var(--carbon-edge);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 12px 32px -12px rgba(0, 0, 0, 0.65);
    color: var(--carbon-text);
    backdrop-filter: blur(12px);
}

/* Leading-edge accent bar (thin racing stripe down the left) */
body[data-theme="carbon"] .card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(
        180deg,
        transparent,
        var(--volt) 18%,
        var(--volt-dim) 50%,
        var(--volt) 82%,
        transparent
    );
    opacity: 0.75;
    pointer-events: none;
    z-index: 1;
}

/* Trailing-edge accent bar (mirror of left) */
body[data-theme="carbon"] .card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(
        180deg,
        transparent,
        var(--volt) 18%,
        var(--volt-dim) 50%,
        var(--volt) 82%,
        transparent
    );
    opacity: 0.75;
    pointer-events: none;
    z-index: 1;
}

/* Weather cards: same gloss panel as .card (no inner fairing stripes) */
body[data-theme="carbon"] .weather-card {
    background-color: var(--carbon-panel-2);
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.05), transparent 45%);
    border: 1px solid var(--volt-border);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

/* Primary CTA – outline + soft lime wash (not a solid neon fill) */
body[data-theme="carbon"] .btn-primary,
body[data-theme="carbon"] .btn-primary.text-white {
    background: rgba(194, 220, 66, 0.1) !important;
    color: var(--volt) !important;
    border: 1.5px solid var(--volt) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: none !important;
}

body[data-theme="carbon"] .btn-primary:hover,
body[data-theme="carbon"] .btn-primary.text-white:hover {
    background: rgba(194, 220, 66, 0.18) !important;
    color: #d4e86a !important;
    border-color: #d4e86a !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

/* Google sign-in – same outline + soft wash language as primary CTA */
body[data-theme="carbon"] .google-signin-wrap {
    border-radius: 0.5rem;
}

body[data-theme="carbon"] .google-signin-btn {
    background: rgba(194, 220, 66, 0.1);
    border: 1.5px solid var(--volt);
    color: var(--volt);
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

body[data-theme="carbon"] .google-signin-wrap:hover .google-signin-btn {
    background: rgba(194, 220, 66, 0.18);
    border-color: #d4e86a;
    color: #d4e86a;
}

/* Inputs */
body[data-theme="carbon"] .input-group input[type="time"],
body[data-theme="carbon"] .input-group input[type="number"],
body[data-theme="carbon"] #origin-search input,
body[data-theme="carbon"] #destination-search input,
body[data-theme="carbon"] #origin-search .geoapify-autocomplete-input,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-input {
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--carbon-text) !important;
    background: rgba(8, 10, 11, 0.85) !important;
}

body[data-theme="carbon"] .input-group input[type="time"]:focus,
body[data-theme="carbon"] .input-group input[type="number"]:focus,
body[data-theme="carbon"] #origin-search input:focus,
body[data-theme="carbon"] #destination-search input:focus {
    border-color: var(--volt) !important;
    box-shadow: 0 0 0 2px var(--volt-soft);
}

body[data-theme="carbon"] #origin-search.disabled::after,
body[data-theme="carbon"] #destination-search.disabled::after {
    background: rgba(17, 19, 21, 0.96);
    color: var(--carbon-text);
    border: 1px solid var(--carbon-edge);
}

/* Autocomplete dropdown */
body[data-theme="carbon"] #origin-search .geoapify-autocomplete-items,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-items {
    background: rgba(14, 16, 18, 0.98) !important;
    border-color: var(--carbon-edge) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

body[data-theme="carbon"] #origin-search .geoapify-autocomplete-items > *,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-items > *,
body[data-theme="carbon"] #origin-search .geoapify-autocomplete-items *:not(strong):not(b),
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-items *:not(strong):not(b) {
    color: var(--carbon-text) !important;
}

body[data-theme="carbon"] #origin-search .geoapify-autocomplete-items > *:hover,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-items > *:hover,
body[data-theme="carbon"] #origin-search .geoapify-autocomplete-item-active,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-item-active {
    background: rgba(194, 220, 66, 0.12) !important;
}

body[data-theme="carbon"] #origin-search .geoapify-autocomplete-items strong,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-items strong,
body[data-theme="carbon"] #origin-search .geoapify-autocomplete-items b,
body[data-theme="carbon"] #destination-search .geoapify-autocomplete-items b {
    color: #d4e86a !important;
}

/* Typography – soft off-white, not pure white */
body[data-theme="carbon"] h1,
body[data-theme="carbon"] h2,
body[data-theme="carbon"] h3 {
    color: var(--carbon-text);
}

body[data-theme="carbon"] .text-gray-600,
body[data-theme="carbon"] .text-gray-500,
body[data-theme="carbon"] .text-gray-700,
body[data-theme="carbon"] p.text-gray-600 {
    color: var(--carbon-muted) !important;
}

body[data-theme="carbon"] .text-gray-800,
body[data-theme="carbon"] .text-white {
    color: var(--carbon-text) !important;
}

/*
 * Type: Barlow + Barlow Condensed – industrial / motorsport sans
 * (closer to bike-brand insignia than rounded UI fonts)
 */
body[data-theme="carbon"] {
    font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0.015em;
}

body[data-theme="carbon"] #main-title.title-text,
body[data-theme="carbon"] h1,
body[data-theme="carbon"] h2,
body[data-theme="carbon"] h3,
body[data-theme="carbon"] .btn-primary,
body[data-theme="carbon"] .tarmac-nav-title {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

body[data-theme="carbon"] label,
body[data-theme="carbon"] .location-label,
body[data-theme="carbon"] #theme-section label {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.8rem;
}

body[data-theme="carbon"] #input-section-card label {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    body[data-theme="carbon"] #input-section-card label {
        font-size: 0.875rem;
    }
}

/* Title: mid lime → silver + forward lean (speed / motorsport) */
body[data-theme="carbon"] #main-title.title-text {
    background: linear-gradient(135deg, #d4e86a 0%, #c2dc42 42%, #d5dad6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    filter: none;
    font-weight: 700 !important;
    font-style: italic;
    letter-spacing: 0.04em;
    display: inline-block;
    transform: skewX(-8deg);
    transform-origin: center;
}

body[data-theme="carbon"] #main-title .title-ride,
body[data-theme="carbon"] #main-title .title-dont {
    -webkit-text-fill-color: transparent !important;
}

/* Subtitle: same speed lean, lighter weight */
body[data-theme="carbon"] #main-subtitle {
    font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-block;
    transform: skewX(-6deg);
    transform-origin: center;
}

/* Labels / nav icons: soft sage-gray (via --dark-orange), not neon lime */
body[data-theme="carbon"] [style*="var(--dark-orange)"],
body[data-theme="carbon"] [style*="color: var(--dark-orange)"] {
    color: var(--dark-orange) !important;
}

body[data-theme="carbon"] [style*="border-color: var(--primary-orange)"] {
    border-color: var(--volt-border) !important;
}

/* Header controls hover */
body[data-theme="carbon"] .hover\:bg-gray-100:hover,
body[data-theme="carbon"] button:hover.rounded-lg {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Logo SVG – muted lime */
body[data-theme="carbon"] #logoHelmetGrad stop:first-child,
body[data-theme="carbon"] #logoMotoGrad stop:first-child,
body[data-theme="carbon"] #logoBikeGrad stop:first-child {
    stop-color: #c2dc42;
}
body[data-theme="carbon"] #logoHelmetGrad stop:last-child,
body[data-theme="carbon"] #logoMotoGrad stop:last-child,
body[data-theme="carbon"] #logoBikeGrad stop:last-child {
    stop-color: #d4e86a;
}

/* Theme selector */
body[data-theme="carbon"] #theme-section label {
    color: var(--carbon-muted) !important;
}

body[data-theme="carbon"] #theme-selector {
    background: rgba(14, 16, 18, 0.95) !important;
    color: var(--carbon-text) !important;
    border-color: var(--carbon-edge) !important;
}

/* Footer */
body[data-theme="carbon"] footer .bg-gray-50 {
    background-color: rgba(17, 19, 21, 0.95) !important;
}

body[data-theme="carbon"] footer .border-gray-200,
body[data-theme="carbon"] footer .border-gray-300 {
    border-color: var(--carbon-edge) !important;
}

body[data-theme="carbon"] footer a {
    color: #c2dc42 !important;
}

body[data-theme="carbon"] footer a:hover {
    color: #d4e86a !important;
}

/* Modals */
body[data-theme="carbon"] .welcome-modal,
body[data-theme="carbon"] .paywall-modal,
body[data-theme="carbon"] .profile-page-content {
    background: linear-gradient(160deg, #15181b, #0e1012) !important;
    border-color: var(--carbon-edge) !important;
    color: var(--carbon-text);
}

body[data-theme="carbon"] .welcome-modal h2,
body[data-theme="carbon"] .paywall-modal h2,
body[data-theme="carbon"] .paywall-modal h3 {
    color: #d4e86a !important;
}

body[data-theme="carbon"] .welcome-overlay,
body[data-theme="carbon"] .paywall-overlay {
    background-color: rgba(0, 0, 0, 0.78);
}

body[data-theme="carbon"] .welcome-modal .bg-gray-50 {
    background-color: rgba(194, 220, 66, 0.07) !important;
}

/* Safety chips – softer, readable */
body[data-theme="carbon"] .bg-green-100,
body[data-theme="carbon"] .bg-green-50 {
    background-color: rgba(194, 220, 66, 0.14) !important;
}

body[data-theme="carbon"] .text-green-900,
body[data-theme="carbon"] .text-green-800,
body[data-theme="carbon"] .text-green-700 {
    color: #d4e86a !important;
}

body[data-theme="carbon"] .border-green-400,
body[data-theme="carbon"] .border-green-500,
body[data-theme="carbon"] .border-green-200,
body[data-theme="carbon"] .border-green-300 {
    border-color: rgba(194, 220, 66, 0.4) !important;
}

body[data-theme="carbon"] .bg-yellow-50,
body[data-theme="carbon"] .bg-yellow-100 {
    background-color: rgba(202, 168, 60, 0.14) !important;
}

body[data-theme="carbon"] .text-yellow-800,
body[data-theme="carbon"] .text-yellow-900,
body[data-theme="carbon"] .text-yellow-700 {
    color: #e0c86a !important;
}

body[data-theme="carbon"] .bg-red-100,
body[data-theme="carbon"] .bg-orange-100,
body[data-theme="carbon"] .bg-orange-50 {
    background-color: rgba(200, 120, 110, 0.14) !important;
}

body[data-theme="carbon"] .text-red-600,
body[data-theme="carbon"] .text-red-800,
body[data-theme="carbon"] .text-red-900,
body[data-theme="carbon"] .text-orange-800 {
    color: #e0a8a0 !important;
}

body[data-theme="carbon"] .border {
    border-color: var(--carbon-edge);
}

/* Profile tabs */
body[data-theme="carbon"] .profile-tab.active {
    border-color: var(--volt) !important;
    color: #d4e86a !important;
}

body[data-theme="carbon"] .calendar-day-circle.travel-day {
    border-color: var(--volt);
}