/* ==========================================================================
   Carbon - locked dark/premium performance theme (loaded AFTER vanilla).
   Near-black page, white text, one electric-lime accent, condensed headings.
     page #0e0f12   cards #17191d   bands #000   accent lime #c8ff00
   Overrides design tokens + every component that assumed a light page (nav,
   cards, forms, the dark-band buttons). The booking flow re-skins itself
   because it reads --color-accent.
   ========================================================================== */

.theme-carbon {
    /* Fonts - Saira Condensed headings (narrow, sporty), Inter body. */
    --font-heading: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    /* Brand: electric lime. */
    --color-accent: #c8ff00;
    --color-accent-hover: #d8ff4d;

    /* Dark page, slightly lighter cards, pure-black punctuation bands. */
    --color-bg: #0e0f12;
    --color-surface: #17191d;        /* cards / asides - lifted off the page */
    --color-surface-dark: #000000;   /* footer / stats / quote-cta bands */
    --color-border: #2a2d33;

    --color-text: #f5f6f7;
    --color-text-secondary: #a0a4ad;
    --color-text-muted: #c4c8d0;     /* eyebrows must stay readable on dark */
    --color-text-on-dark: #ffffff;
    --color-text-on-dark-muted: #8a8f99;

    --radius-sm: 2px;   /* sharp, technical */
    --radius-md: 6px;
    --radius-lg: 10px;
}

/* Dark page background; condensed body type a touch larger for the wide font. */
body.theme-carbon { background: var(--color-bg); }

/* Headings: condensed + tight, faint uppercase punch on eyebrows already. */
.theme-carbon h1,
.theme-carbon h2,
.theme-carbon h3,
.theme-carbon h4 { letter-spacing: -0.01em; }
.theme-carbon .c-hero__title,
.theme-carbon .c-section-head__title,
.theme-carbon .c-services__title,
.theme-carbon .c-cta__title { text-transform: uppercase; letter-spacing: 0.005em; }

/* ===== BUTTONS: lime fill, BLACK label (white fails contrast on lime) ===== */
.theme-carbon .btn-primary,
.theme-carbon .btn--primary { color: #000; font-weight: 700; }
.theme-carbon .btn-primary:hover,
.theme-carbon .btn--primary:hover { background: var(--color-accent-hover); color: #000; }
/* Secondary (outline) buttons on the dark page. */
.theme-carbon .btn-secondary,
.theme-carbon .btn--secondary { color: var(--color-text); border-color: var(--color-border); }
.theme-carbon .btn-secondary:hover,
.theme-carbon .btn--secondary:hover { border-color: var(--color-accent); }

/* ===== NAVBAR: translucent black, white links, lime CTA with black text ===== */
.theme-carbon .c-nav {
    background: rgba(14, 15, 18, 0.85);
    border-bottom: 1px solid var(--color-border);
}
.theme-carbon .c-nav__logo,
.theme-carbon .c-nav__link { color: var(--color-text); }
.theme-carbon .c-nav__link:hover { opacity: 0.6; }
.theme-carbon .c-nav__link--button { color: #000; background: var(--color-accent); }
.theme-carbon .c-nav__link--button:hover { background: var(--color-accent-hover); opacity: 1; }
.theme-carbon .c-nav__hamburger span { background: var(--color-text); }
.theme-carbon .c-nav__mobile { background: rgba(14, 15, 18, 0.98); }
.theme-carbon .c-nav__mobile a { border-bottom-color: var(--color-border); }

/* Section eyebrows + hero label in brand lime. */
.theme-carbon .c-hero__label,
.theme-carbon .c-section-head__label,
.theme-carbon .c-services__label,
.theme-carbon .c-label { color: var(--color-accent); }
.theme-carbon .c-hero--image .c-hero__label { color: rgba(255, 255, 255, 0.9); }

/* ===== SURFACES / CARDS: lift off the page with the lighter surface tone ===== */
/* Several vanilla components paint cards with --color-bg (white on light);
   on dark that makes them vanish into the page, so repaint with --surface. */
.theme-carbon .c-service-card,
.theme-carbon .c-pricing-index__card,
.theme-carbon .oh-dept { background: var(--color-surface); }
.theme-carbon .c-service-card__image { background: var(--color-bg); }
/* Hover: a lime ring + lime-tinted glow instead of the light-mode drop shadow. */
.theme-carbon .c-service-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), 0 16px 44px rgba(0, 0, 0, 0.6);
}
.theme-carbon .c-pricing-index__card:hover { border-color: var(--color-accent); }

/* The "services" section band uses --surface (light grey on vanilla); on dark
   it should read as the page, not a muddy in-between. */
.theme-carbon .c-services,
.theme-carbon .c-tabs,
.theme-carbon .c-cta { background: var(--color-bg); }

/* ===== DARK BANDS: subtle carbon-fibre texture on the pure-black bands ===== */
.theme-carbon .c-footer,
.theme-carbon .c-stats,
.theme-carbon .c-quote-cta {
    background-color: #000;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px);
    border-top: 1px solid var(--color-border);
}

/* Quote-CTA "Book a time" box: vanilla makes its button --color-bg/--color-text
   (dark-on-black here → invisible). Make it lime with a black label. */
.theme-carbon .c-quote-cta .btn-primary,
.theme-carbon .c-quote-cta .btn--primary { background: var(--color-accent); color: #000; }
.theme-carbon .c-quote-cta .btn-primary:hover,
.theme-carbon .c-quote-cta .btn--primary:hover { background: var(--color-accent-hover); }

/* ===== PROSE / LINKS: underlined links use currentColor → fine on dark, but
   the article link border was hard-set to --text; keep it readable. ===== */
.theme-carbon .c-prose a { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ===== FORMS: dark fields, light text, lime focus ring ===== */
.theme-carbon .field input,
.theme-carbon .field select,
.theme-carbon .field textarea,
.theme-carbon .bk-search input {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
}
.theme-carbon .field input::placeholder,
.theme-carbon .field textarea::placeholder { color: var(--color-text-secondary); }
.theme-carbon .field input:focus,
.theme-carbon .field select:focus,
.theme-carbon .field textarea:focus,
.theme-carbon .bk-search input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 255, 0, 0.18);
}

/* Time-slot picker: lime fill + black label when selected. */
.theme-carbon .slot-btn { background: var(--color-surface); color: var(--color-text); }
.theme-carbon .slot-btn:hover { border-color: var(--color-accent); }
.theme-carbon .slot-btn.is-selected { background: var(--color-accent); color: #000; border-color: var(--color-accent); }

/* Booking service / upsell cards paint with --color-bg → repaint to surface so
   the card edge reads on the dark page; selected check stays black-on-lime. */
.theme-carbon .bk-card,
.theme-carbon .bk-upsell { background: var(--color-surface); }
.theme-carbon .bk-card.is-selected,
.theme-carbon .bk-card--option:has(input:checked),
.theme-carbon .bk-upsell:has(input:checked) {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(200, 255, 0, 0.35);
}
.theme-carbon .bk-card.is-selected .bk-card__check,
.theme-carbon .bk-card--option:has(input:checked) .bk-card__check,
.theme-carbon .bk-upsell:has(input:checked) .bk-upsell__check { color: #000; }
.theme-carbon .bk-cart__toggle { color: #000; }
.theme-carbon .bk-cart__count { background: #000; color: var(--color-accent); }

/* ===== HERO: solid-lime "banner" variant - black text + black-outline button ===== */
.theme-carbon .c-hero--banner { background: var(--color-accent); color: #000; }
.theme-carbon .c-hero--banner .c-hero__title,
.theme-carbon .c-hero--banner .c-hero__desc { color: #000; }
.theme-carbon .c-hero--banner .c-hero__label { color: rgba(0, 0, 0, 0.7); }
.theme-carbon .c-hero--banner .btn-primary,
.theme-carbon .c-hero--banner .btn--primary { background: #000; color: var(--color-accent); }
.theme-carbon .c-hero--banner .btn-primary:hover,
.theme-carbon .c-hero--banner .btn--primary:hover { background: #1a1a1a; }