/* ============================================================
   TALL PAUL TERMITE & PEST CONTROL — COLOR THEME (red-orange)
   Foundation: logo colors #D6361F / #1A1A1A / #F4A81D
   Swap THIS file to re-theme the whole site.
   ============================================================ */

:root, [data-bs-theme=light] {

    /* --- Bootstrap/NL bridge (primary = red-orange) --- */
    --nl-primary: #D6361F;
    --nl-primary-rgb: 214, 54, 31;
    --nl-primary-text-emphasis: #B82D19;
    --nl-primary-text-emphasis-rgb: 184, 45, 25;
    --nl-primary-bg-subtle: #FAE8E5;
    --nl-primary-bg-subtle-rgb: 250, 232, 229;
    --nl-primary-border-subtle: #F5C9C2;
    --nl-btn: var(--nl-primary) !important;
    --nl-btn-border-color: var(--nl-primary);
    --nl-btn-color: #fff;
    --nl-btn-hover-bg: var(--nl-primary-text-emphasis);
    --nl-btn-hover-border-color: var(--nl-primary-text-emphasis);
    --nl-btn-hover-color: #fff;

    /* --- Secondary = gold accent --- */
    --nl-secondary: #F4A81D;
    --nl-secondary-rgb: 244, 168, 29;
    --nl-secondary-text-emphasis: #B87A08;
    --nl-secondary-bg-subtle: #FEF5E1;
    --nl-secondary-border-subtle: #FBE3B0;

    --nl-link-color: #B82D19;
    --nl-link-color-rgb: 184, 45, 25;
    --nl-link-hover-color: #D6361F;
    --nl-link-hover-color-rgb: 214, 54, 31;
    --nl-focus-ring-color: rgba(var(--nl-primary-rgb), .35);

    --nl-pagination-hover-bg: var(--nl-primary-text-emphasis);
    --nl-pagination-hover-border-color: var(--nl-primary-text-emphasis);
    --nl-pagination-active-bg: var(--nl-primary);
    --nl-pagination-active-border-color: var(--nl-primary);
    --swiper-theme-color: #D6361F;

    /* ============================================================
       BRAND TOKENS (semantic — used by styles.css and page CSS)
       ============================================================ */

    --brand-primary:            #D6361F;
    --brand-primary-rgb:        214, 54, 31;
    --brand-primary-hover:      #B82D19;
    --brand-primary-dark:       #9C2514;
    --brand-primary-subtle:     #FAE8E5;
    --brand-primary-emphasis:   #FF4A2E;

    --brand-secondary:          #1A1A1A;
    --brand-secondary-rgb:      26, 26, 26;
    --brand-secondary-hover:    #2E2E2E;
    --brand-secondary-midsurface: #2C2C2C;
    --brand-secondary-border:   #3A3A3A;

    --brand-accent:             #F4A81D;
    --brand-accent-rgb:         244, 168, 29;
    --brand-accent-hover:       #D8920A;
    --brand-accent-dark:        #B87A08;
    --brand-accent-subtle:      #FEF5E1;

    /* Surface / background */
    --brand-bg:                 #FFFFFF;
    --brand-bg-alt:             #F7F5F2;
    --brand-bg-card:            #FFFFFF;
    --brand-bg-dark:            #1A1A1A;
    --brand-bg-dark-alt:        #141414;
    --brand-bg-tint:            #FDF9F2;

    /* Text */
    --brand-text:               #1A1A1A;
    --brand-text-rgb:           26, 26, 26;
    --brand-text-body:          #2D2D2D;
    --brand-text-secondary:     #5C5C5C;
    --brand-text-tertiary:      #8A8A8A;
    --brand-text-on-dark:       #FFFFFF;
    --brand-text-on-dark-secondary: #C8C8C8;
    --brand-text-on-primary:    #FFFFFF;
    --brand-text-on-accent:     #1A1A1A;
    --brand-text-link:          #B82D19;
    --brand-text-link-hover:    #D6361F;

    /* Borders */
    --brand-border:             #E0DCDA;
    --brand-border-strong:      #C8C3C0;
    --brand-border-dark:        #3A3A3A;

    /* Status */
    --brand-success:            #2E7D32;
    --brand-success-bg:         #E8F5E9;
    --brand-warning:            #F4A81D;
    --brand-warning-bg:         #FEF5E1;
    --brand-error:              #C62828;
    --brand-error-bg:           #FFEBEE;
    --brand-info:               #1565C0;
    --brand-info-bg:            #E3F2FD;

    /* Typography */
    --font-heading:             'Oswald', 'Arial Narrow', Impact, Arial, sans-serif;
    --font-body:                'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:                'Courier New', Courier, monospace;
    --font-weight-regular:      400;
    --font-weight-medium:       500;
    --font-weight-semibold:     600;
    --font-weight-bold:         700;
    --font-weight-heading:      700;
    --font-weight-heading-sub:  400;

    /* Type scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;

    /* Line heights */
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* Letter spacing */
    --tracking-tighter: -0.025em;
    --tracking-tight:   -0.01em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;

    /* Spacing */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem; --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem; --space-12: 3rem;
    --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;  --space-32: 8rem;

    --section-py:    clamp(3rem, 6vw, 5rem);
    --section-py-lg: clamp(4rem, 8vw, 7rem);
    --section-py-sm: clamp(2rem, 4vw, 3rem);

    /* Layout */
    --container-max:      1200px;
    --container-max-wide: 1400px;
    --container-narrow:   800px;
    --container-px:       clamp(1rem, 4vw, 2rem);

    /* Radius */
    --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;
    --radius-xl: 20px; --radius-2xl: 32px; --radius-full: 9999px;
    --radius-btn: 6px; --radius-btn-lg: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
    --shadow-xl: 0 20px 48px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.08);
    --shadow-btn-primary:       0 4px 16px rgba(214,54,31,.35);
    --shadow-btn-primary-hover: 0 6px 22px rgba(214,54,31,.50);
    --shadow-btn-accent:        0 4px 16px rgba(244,168,29,.35);
    --shadow-focus:             0 0 0 3px rgba(214,54,31,.40);
    --shadow-focus-accent:      0 0 0 3px rgba(244,168,29,.40);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Z-index */
    --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300;
    --z-overlay: 400; --z-modal: 500; --z-toast: 600;
}

[data-bs-theme=dark] {
    --nl-primary: #FF5638;
    --nl-primary-rgb: 255, 86, 56;
    --nl-primary-text-emphasis: #FF7A63;
    --nl-primary-text-emphasis-rgb: 255, 122, 99;
    --nl-primary-bg-subtle: #3A130C;
    --nl-primary-bg-subtle-rgb: 58, 19, 12;
    --nl-primary-border-subtle: #5A2015;
    --nl-btn: var(--nl-primary) !important;
    --nl-btn-border-color: var(--nl-primary);
    --nl-btn-color: #fff;
    --nl-btn-hover-bg: var(--nl-primary-text-emphasis);
    --nl-btn-hover-border-color: var(--nl-primary-text-emphasis);
    --nl-btn-hover-color: #1A1A1A;

    --nl-secondary: #F4A81D;
    --nl-secondary-rgb: 244, 168, 29;
    --nl-secondary-text-emphasis: #FBC85C;
    --nl-secondary-bg-subtle: #2A2008;
    --nl-secondary-border-subtle: #4A3A10;

    --nl-link-color: #FF6347;
    --nl-link-hover-color: #FF7A63;
    --swiper-theme-color: #FF5638;

    --brand-bg:            #121212;
    --brand-bg-alt:        #1C1C1C;
    --brand-bg-card:       #1E1E1E;
    --brand-bg-tint:       #1A180E;
    --brand-text:          #F2F2F2;
    --brand-text-body:     #DADADA;
    --brand-text-secondary:#A0A0A0;
    --brand-text-tertiary: #707070;
    --brand-text-link:     #FF6347;
    --brand-text-link-hover:#FF7A63;
    --brand-border:        #2E2E2E;
    --brand-border-strong: #404040;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
    --shadow-md: 0 4px 12px rgba(0,0,0,.40);
    --shadow-lg: 0 10px 28px rgba(0,0,0,.50);
}

/* --- Bootstrap component overrides --- */
.btn-primary {
    --nl-btn-color: #fff;
    --nl-btn-bg: var(--nl-primary);
    --nl-btn-border-color: var(--nl-primary);
    --nl-btn-hover-color: #fff;
    --nl-btn-hover-bg: var(--nl-primary-text-emphasis);
    --nl-btn-hover-border-color: var(--nl-primary-text-emphasis);
    --nl-btn-active-color: #fff;
    --nl-btn-active-bg: var(--nl-primary-text-emphasis);
    --nl-btn-active-border-color: var(--nl-primary-text-emphasis);
    --nl-btn-disabled-color: #fff;
    --nl-btn-disabled-bg: var(--nl-primary-bg-subtle);
    --nl-btn-disabled-border-color: var(--nl-primary-bg-subtle);
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.btn-outline-primary {
    --nl-btn-color: var(--nl-primary);
    --nl-btn-border-color: var(--nl-primary);
    --nl-btn-hover-color: #fff;
    --nl-btn-hover-bg: var(--nl-primary);
    --nl-btn-hover-border-color: var(--nl-primary);
    --nl-btn-active-color: #fff;
    --nl-btn-active-bg: var(--nl-primary);
    --nl-btn-active-border-color: var(--nl-primary);
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: uppercase;
}

/* Gold "Get a Free Quote" button — charcoal text ONLY, never white */
.btn-accent {
    --nl-btn-color: #1A1A1A;
    --nl-btn-bg: var(--nl-secondary);
    --nl-btn-border-color: var(--nl-secondary);
    --nl-btn-hover-color: #1A1A1A;
    --nl-btn-hover-bg: var(--nl-secondary-text-emphasis);
    --nl-btn-hover-border-color: var(--nl-secondary-text-emphasis);
    background-color: var(--nl-secondary);
    border-color: var(--nl-secondary);
    color: var(--brand-text-on-accent);
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
}

.pagination {
    --nl-pagination-active-bg: var(--nl-primary);
    --nl-pagination-active-border-color: var(--nl-primary);
}

.swiper-pagination-bullet-active { background: var(--nl-primary); }
.swiper-pagination-bullet { border: 2px solid var(--nl-secondary-border-subtle); }
.swiper-button-prev:hover, .swiper-button-next:hover { background-color: var(--nl-primary); }

.form-control:focus { border-color: var(--nl-primary); box-shadow: var(--shadow-focus); }

.bg-primary-gradient { background: linear-gradient(135deg, #FF4A2E, #D6361F 50%, #9C2514); }
.bg-black { background-color: #000 !important; }
.bg-dark { background-color: var(--brand-secondary) !important; }
.text-primary { color: var(--brand-primary-hover) !important; }
.bg-light .text-primary { color: var(--brand-primary-hover) !important; }