/* =============================================================
   BYTESPARK DIGITAL - Shared theme tokens (all pages)
   Light theme, blue-tint sections, navy accent panels.
   Loaded by includes/header.php after style.css.
   Page-family files (home.css, theme-services.css, ...) build on these.
   ============================================================= */

body,
.hp-dark {
    --hp-bg:        #FFFFFF;
    --hp-bg-2:      #E1ECFC;   /* deeper blue tint (alternate sections) */
    --hp-tint:      #EAF2FF;   /* main section tint */
    --hp-tint-soft: #F6FAFF;
    --hp-surface:   #FFFFFF;
    --hp-surface-2: #F8FAFD;
    --hp-border:    #E1E7F2;
    --hp-heading:   #0F1142;
    --hp-text:      #1E2440;
    --hp-muted:     #525B7A;
    --hp-accent:    #2F7D05;   /* green for text on light */
    --hp-grad-a:    #3FA309;
    --hp-grad-b:    #0B93AD;
    --hp-tag:       #EEF2F9;
    --hp-ghost:     rgba(15, 17, 66, .06);
    --hp-media:     #F1F4FA;
    --hp-green:     #63CE18;
    --hp-green-2:   #8BEF45;
    --hp-violet:    #6F5CF0;
    --hp-magenta:   #D63A91;
    --hp-cyan:      #0B93AD;
    --hp-shadow:    none;
}

/* Navy panels used inside the light theme (stats bands, CTA, feature cards) */
.hp-dark {
    --hp-bg:        #0A0E33;
    --hp-bg-2:      #0F1142;
    --hp-surface:   rgba(255, 255, 255, 0.05);
    --hp-surface-2: rgba(255, 255, 255, 0.09);
    --hp-border:    rgba(255, 255, 255, 0.12);
    --hp-heading:   #FFFFFF;
    --hp-text:      #E8ECF8;
    --hp-muted:     #AEB6D6;
    --hp-accent:    #8BEF45;
    --hp-grad-a:    #8BEF45;
    --hp-grad-b:    #35D4E8;
    --hp-tag:       rgba(255, 255, 255, .08);
    --hp-ghost:     rgba(255, 255, 255, .07);
    --hp-media:     rgba(0, 0, 0, .3);
    --hp-violet:    #8B7CFF;
    --hp-magenta:   #E0449C;
    --hp-cyan:      #35D4E8;
    background: var(--hp-bg);
    color: var(--hp-text);
}

/* Gradient text accent, same as the home page */
.th-grad {
    background: linear-gradient(90deg, var(--hp-grad-a), var(--hp-grad-b));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}