/**
 * ============================================================
 *  KAVYA CAB — Root Theme Token System
 *  Edit ONLY this file to change the entire site's look & feel
 * ============================================================
 */

:root {
    /* ─── BRAND IDENTITY ─────────────────────────────────── */
    --brand-name: "Kavya Cab";

    /* ─── GOLDEN / PRIMARY PALETTE ──────────────────────── */
    /* Matched to Logo_kavya2.png: bright sunny taxi gold + chrome silver */
    --golden:           #F2C200;        /* Logo ribbon gold (primary) */
    --golden-light:     #FFE566;        /* Lemon highlight (ribbon top) */
    --golden-dark:      #A07F00;        /* Deep gold — readable on light bg */
    --golden-hover:     #DDB100;        /* Hover state gold */
    --golden-muted:     rgba(242, 194, 0, 0.14);   /* Soft tint */
    --golden-border:    rgba(242, 194, 0, 0.40);   /* Border tint */

    /* Chrome / silver (logo ring & car outline) */
    --silver:           #C9CCD1;
    --silver-light:     #F2F3F5;
    --silver-gradient:  linear-gradient(135deg, #FFFFFF 0%, #DDE0E4 45%, #C9CCD1 70%, #F2F3F5 100%);

    /* Gradient definitions */
    --golden-gradient:          linear-gradient(135deg, #E8B800 0%, #F7CE1B 45%, #FFE566 72%, #F2C200 100%);
    --orange-gradient:          var(--golden-gradient);
    --golden-gradient-hover:    linear-gradient(135deg, #D5A900 0%, #EFC400 50%, #FFDC4D 100%);
    --golden-gradient-radial:   radial-gradient(ellipse at top, #FFE566 0%, #F2C200 45%, #D5A900 100%);
    --golden-shimmer:           linear-gradient(90deg, transparent 0%, rgba(255, 224, 80, 0.45) 50%, transparent 100%);

    /* ─── NAVBAR (TOP — DARK BLACK) ──────────────────────── */
    --navbar-bg:                #000000;
    --navbar-text:              #ffffff;
    --navbar-border:            rgba(255, 255, 255, 0.08);
    --navbar-shadow:            0 4px 24px rgba(0, 0, 0, 0.45);
    --status-bar-bg:            #DDB100;  /* Top golden status strip */

    /* ─── BUTTONS ────────────────────────────────────────── */
    /* Black-on-yellow: classic taxi look, ~13:1 contrast */
    --btn-primary-bg:           var(--golden-gradient);
    --btn-primary-text:         #14130b;
    --btn-primary-shadow:       0 6px 20px rgba(200, 160, 0, 0.40);
    --btn-secondary-bg:         #ffffff;
    --btn-secondary-text:       var(--golden-dark);
    --btn-secondary-border:     var(--golden);

    /* ─── DARK / FOOTER THEME ───────────────────────────── */
    --footer-bg:                #0f0f0f;
    --footer-text:              rgba(255, 255, 255, 0.75);
    --footer-heading:           #ffffff;
    --footer-accent:            var(--golden);
    --footer-border:            rgba(255, 255, 255, 0.08);
    --footer-link-hover:        var(--golden-light);

    /* ─── BODY / CONTENT BACKGROUND ─────────────────────── */
    /* Cool silver neutrals to echo the logo's chrome ring */
    --bg-primary:       #ffffff;
    --bg-light:         #f7f7f8;    /* Subtle silver tint */
    --bg-section-alt:   #f1f2f4;    /* Alternate sections */
    --bg-card:          #ffffff;

    /* ─── TEXT ───────────────────────────────────────────── */
    --text-primary:     #1a1a1a;
    --text-secondary:   #4a4a4a;
    --text-muted:       #888888;
    --text-golden:      var(--golden-dark);   /* gold text on light bg needs the dark shade */
    --text-white:       #ffffff;

    /* ─── TYPOGRAPHY ─────────────────────────────────────── */
    --font-primary:     'Outfit', 'Inter', sans-serif;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-black:    900;

    /* ─── SPACING SYSTEM ─────────────────────────────────── */
    --section-padding-y:    80px;
    --section-padding-y-sm: 50px;
    --card-padding:         24px;
    --card-radius:          16px;
    --card-radius-lg:       24px;
    --card-radius-xl:       32px;

    /* ─── SHADOWS ────────────────────────────────────────── */
    --shadow-xs:    0 2px 6px rgba(0,0,0,0.05);
    --shadow-sm:    0 4px 16px rgba(0,0,0,0.06);
    --shadow-md:    0 8px 24px rgba(0,0,0,0.10);
    --shadow-lg:    0 16px 48px rgba(0,0,0,0.14);
    --shadow-golden:    0 8px 24px rgba(220, 180, 0, 0.30);
    --shadow-golden-lg: 0 16px 48px rgba(220, 180, 0, 0.40);

    /* ─── BORDERS ────────────────────────────────────────── */
    --border-light: 1px solid #e8e9ec;
    --border-golden: 1px solid var(--golden-border);

    /* ─── TRANSITIONS & ANIMATIONS ──────────────────────── */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── GLASSMORPHISM ──────────────────────────────────── */
    --glass-bg:     rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-blur:   blur(16px) saturate(180%);

    /* Golden glass variant */
    --glass-golden-bg:      rgba(242, 194, 0, 0.12);
    --glass-golden-border:  rgba(242, 194, 0, 0.3);

    /* ─── ADMIN-SPECIFIC OVERRIDES ───────────────────────── */
    --admin-sidebar-bg:     #0f0f0f;
    --admin-sidebar-text:   rgba(255,255,255,0.75);
    --admin-sidebar-active: var(--golden);
    --admin-navbar-bg:      #1a1a1a;
    --admin-accent:         var(--golden);

    /* ─── Z-INDEX LAYERS ─────────────────────────────────── */
    --z-navbar:     1030;
    --z-dropdown:   2000;
    --z-modal:      1060;
    --z-toast:      1080;
    --z-top-strip:  10000;
}

/* ─── RESPONSIVE TOKEN OVERRIDES ──────────────────────────── */
@media (max-width: 767px) {
    :root {
        --section-padding-y:    40px;
        --section-padding-y-sm: 28px;
        --card-padding:         16px;
    }
}

/* ─── PAGE LOAD FADE-IN ────────────────────────────────────── */
@keyframes kc-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes kc-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes kc-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes kc-pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 194, 0, 0.4); }
    50%       { box-shadow: 0 0 0 10px rgba(242, 194, 0, 0); }
}

@keyframes kc-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

@keyframes kc-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── GLOBAL ANIMATION UTILITY CLASSES ────────────────────── */
.kc-animate-fadeInUp {
    animation: kc-fadeInUp 0.6s ease both;
}

.kc-animate-fadeIn {
    animation: kc-fadeIn 0.5s ease both;
}

.kc-animate-float {
    animation: kc-float 3s ease-in-out infinite;
}

/* Scroll-reveal: JS adds .kc-revealed */
.kc-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.kc-reveal.kc-revealed {
    opacity: 1;
    transform: translateY(0);
}

.kc-reveal-delay-1 { transition-delay: 0.1s; }
.kc-reveal-delay-2 { transition-delay: 0.2s; }
.kc-reveal-delay-3 { transition-delay: 0.3s; }
.kc-reveal-delay-4 { transition-delay: 0.4s; }

/* ─── GOLDEN SHIMMER TEXT ──────────────────────────────────── */
.text-golden-shimmer {
    background: linear-gradient(90deg, var(--golden-dark), var(--golden-light), var(--golden-dark));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: kc-shimmer 3s linear infinite;
}

/* ─── SHARED SECTION HEADER PIECES ─────────────────────────── */
/* Global base so components (cta, fleet, contact) render correctly
   even when services.php's local copy isn't on the page */
.kc-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8a6d00;
    margin-bottom: 10px;
    padding: 5px 14px;
    background: var(--golden-muted);
    border: 1px solid var(--golden-border);
    border-radius: 999px;
}

.kc-section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    position: relative;
    padding-bottom: 16px;
    margin-bottom: 12px;
}
.kc-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #E8B800, #FFE566, #E8B800);
    border-radius: 2px;
}

/* ─── UTILITY CLASSES ──────────────────────────────────────── */
.text-golden    { color: var(--text-golden) !important; }
.bg-golden      { background: var(--golden-gradient) !important; }
.border-golden  { border-color: var(--golden) !important; }
.shadow-golden  { box-shadow: var(--shadow-golden) !important; }

/* Body fade in on load */
body {
    animation: kc-fadeIn 0.4s ease both;
}