/* ================================================================
   DARK THEME OVERRIDES
   Overrides site.css light-theme variables and component styles.
   Loaded after site.min.css and site.css in _Layout.cshtml.
   Homepage sections are unaffected — they use their own scoped CSS
   (HeroSection, ServiceSection, etc.) and not these utility classes.
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Brand */
    --color-primary:             #5865F2;
    --color-primary-dark:        #4752C4;
    --color-accent:              #00D9FF;

    /* RGB variants used by skills.css rgba() calls */
    --primary-color-rgb:         88, 101, 242;
    --accent-color-rgb:          0, 217, 255;

    /* Legacy aliases used by ray-* classes and older page CSS */
    --clr-primary:               #5865F2;
    --clr-secondary:             #1E1E1E;
    --clr-accent:                #00D9FF;
    --clr-text-dark:             #E8E8E8;
    --primary-color:             #5865F2;
    --primary-light:             #7289DA;
    --primary-dark:              #4752C4;
    --secondary-color:           #3B4A78;
    --accent-color:              #00D9FF;
    --info-color:                #00D9FF;
    --success-color:             #43B581;
    --warning-color:             #FAA61A;

    /* Text */
    --color-text:                #E8E8E8;
    --color-heading:             #FFFFFF;
    --color-muted:               #B3B3B3;
    --text-color:                #E8E8E8;
    --header-color:              #FFFFFF;
    --muted-color:               #B3B3B3;
    --light-text:                #FFFFFF;

    /* Surfaces */
    --color-bg:                  #0F0F0F;
    --color-surface:             #1E1E1E;
    --color-border:              rgba(255, 255, 255, 0.10);
    --color-border-strong:       rgba(255, 255, 255, 0.15);
    --background-color:          #0F0F0F;
    --background-secondary:      #1A1A1A;
    --background-tertiary:       #202020;
    --card-background-color:     #1E1E1E;
    --card-background-hover:     #252525;

    /* Additional aliases used by Cookie CSS files */
    --text-secondary:            #B3B3B3;
    --text-muted:                #808080;
    --border-color:              rgba(255, 255, 255, 0.10);
    --border-color-hover:        rgba(88, 101, 242, 0.35);
    --background-elevated:       #252525;

    /* Shadows */
    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.60);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.70);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.80);
    --shadow-xl:  0 12px 32px rgba(0, 0, 0, 0.90);

    /* Glow */
    --glow-primary: 0 0 20px rgba(88, 101, 242, 0.40);
    --glow-accent:  0 0 20px rgba(0, 217, 255, 0.40);
    --glow-hover:   0 0 30px rgba(88, 101, 242, 0.60);

    /* Hex pattern */
    --hex-border:    rgba(88, 101, 242, 0.20);
    --hex-primary:   rgba(88, 101, 242, 0.08);
    --hex-secondary: rgba(0, 217, 255, 0.06);

    /* Layout / typography re-exports (needed by skills.css which
       relies on variables.css — loaded only for the homepage) */
    --font-family-base:     'Segoe UI', 'Roboto', -apple-system, sans-serif;
    --font-family-headings: 'Segoe UI', 'Source Sans Pro', sans-serif;
    --font-family-code:     'Consolas', 'Monaco', monospace;
    --font-size-base:       16px;
    --font-size-sm:         0.875rem;
    --font-size-lg:         1.125rem;
    --font-size-xl:         1.25rem;
    --font-size-xxl:        1.5rem;
    --font-size-huge:       2.5rem;
    --line-height-base:     1.6;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    /* site.css aliases */
    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --navbar-height:    70px;
    --container-width:  1200px;
    --section-padding:  5rem 0;

    --border-radius:    8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;

    --transition-fast:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   0.5s cubic-bezier(0.4, 0, 0.2, 1);

    --spacing-xs:   4px;
    --spacing-sm:   8px;
    --spacing-md:   16px;
    --spacing-lg:   24px;
    --spacing-xl:   32px;
    --spacing-xxl:  48px;
    --spacing-xxxl: 64px;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
    background-color: #0F0F0F;
    color: #E8E8E8;
}

h1, h2, h3, h4, h5, h6 { color: #FFFFFF; }

a { color: #7289DA; }
a:hover { color: #00D9FF; }

/* ── Page Hero ──────────────────────────────────────────────── */
.page-hero {
    background: linear-gradient(135deg, #1a1d29 0%, #0f1117 100%);
}

/* Replace light radial glow with the homepage hex-grid pattern */
.page-hero::before {
    background:
        repeating-linear-gradient(0deg,   transparent, transparent 50px, rgba(88, 101, 242, 0.12) 50px, rgba(88, 101, 242, 0.12) 51px),
        repeating-linear-gradient(60deg,  transparent, transparent 50px, rgba(88, 101, 242, 0.12) 50px, rgba(88, 101, 242, 0.12) 51px),
        repeating-linear-gradient(120deg, transparent, transparent 50px, rgba(88, 101, 242, 0.12) 50px, rgba(88, 101, 242, 0.12) 51px);
    opacity: 1;
}

/* ── Page Sections ──────────────────────────────────────────── */
.page-section          { background: #0F0F0F; }
.page-section--white,
.page-section.page-section--white { background: #1A1A1A; }

/* ── Section Headers ────────────────────────────────────────── */
.section-header h2 { color: #FFFFFF; }
.section-header p  { color: #B3B3B3; }

/* ── Stats Bar ───────────────────────────────────────────────── */
.stats-bar {
    background: #1A1A1A;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.stat-bar-number { color: #00D9FF; }
.stat-bar-label  { color: #B3B3B3; }

/* ── Info Card ───────────────────────────────────────────────── */
.info-card {
    background: #1E1E1E;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.60);
}

.info-card-body {
    background: #1E1E1E;
    border-color: rgba(255, 255, 255, 0.08);
    color: #E8E8E8;
}

.info-card-body h3     { color: #FFFFFF; }
.info-card-body em     { color: #B3B3B3; }
.info-card-body strong { color: #FFFFFF; }
.info-card-body a      { color: #7289DA; }

/* ── Feature Card ─────────────────────────────────────────────── */
.feature-card {
    background: #1E1E1E;
    border-color: rgba(255, 255, 255, 0.08);
}

.feature-card:hover {
    border-color: rgba(88, 101, 242, 0.40);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.80), 0 0 20px rgba(88, 101, 242, 0.12);
    transform: translateY(-8px);
}

.feature-card-title { color: #FFFFFF; }
.feature-card-desc  { color: #B3B3B3; }

/* ── Content Card ─────────────────────────────────────────────── */
.content-card {
    background: #1E1E1E;
    border-color: rgba(255, 255, 255, 0.08);
}

.content-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.80), 0 0 20px rgba(88, 101, 242, 0.12);
}

.content-card-body {
    background: #1E1E1E;
}

.content-card-desc { color: #E8E8E8; }
.content-card-meta { color: #B3B3B3; }

/* ── Result Block ─────────────────────────────────────────────── */
.result-block {
    background: rgba(0, 217, 255, 0.07);
    border-left-color: #00D9FF;
    color: #E8E8E8;
}

/* ── Tags & Badges ────────────────────────────────────────────── */
.tech-tag {
    background: rgba(88, 101, 242, 0.12);
    color: #7289DA;
    border-color: rgba(88, 101, 242, 0.25);
}

.badge-tag {
    background: rgba(88, 101, 242, 0.10);
    color: #7289DA;
    border-color: rgba(88, 101, 242, 0.20);
}

.status-badge {
    background: rgba(0, 217, 255, 0.10);
    color: #00D9FF;
    border-color: rgba(0, 217, 255, 0.25);
}

/* ── Contact Cards ────────────────────────────────────────────── */
.contact-card {
    background: #1E1E1E;
    border-color: rgba(255, 255, 255, 0.08);
}

.contact-card-icon { background: rgba(88, 101, 242, 0.15); }
.contact-card:hover .contact-card-icon { background: #5865F2; }
.contact-card h3  { color: #FFFFFF; }
.contact-card p   { color: #B3B3B3; }
.contact-link     { color: #7289DA; }
.contact-link:hover { color: #00D9FF; }

/* ── Form ─────────────────────────────────────────────────────── */
.form-label { color: #E8E8E8; }

.form-ctrl {
    background: #1A1A1A;
    border-color: rgba(255, 255, 255, 0.15);
    color: #E8E8E8;
}

.form-ctrl:focus {
    background: #1E1E1E;
    border-color: #5865F2;
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
}

.form-note { color: #B3B3B3; }

/* ── Response Section ─────────────────────────────────────────── */
.response-section {
    background: linear-gradient(135deg, #1A1A1A 0%, #202020 100%);
}

.response-section h2         { color: #FFFFFF; }
.response-section .response-lead { color: #B3B3B3; }

.response-item {
    background: #1E1E1E;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.60);
}

.response-item h4 { color: #FFFFFF; }
.response-item p  { color: #B3B3B3; }

/* ── About Intro ──────────────────────────────────────────────── */
.about-intro {
    background: #1E1E1E;
    border-color: rgba(255, 255, 255, 0.08);
}

.about-intro h2 { color: #00D9FF; }
.about-intro p  { color: #E8E8E8; }

.accent-quote {
    background: rgba(0, 217, 255, 0.05);
    border-left-color: #00D9FF;
    color: #E8E8E8;
}

.about-list li           { color: #E8E8E8; }
.about-list li::before   { color: #5865F2; }

/* ── About CTA ────────────────────────────────────────────────── */
.about-cta {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.08), rgba(0, 217, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.08);
}

.about-cta h2 { color: #FFFFFF; }
.about-cta p  { color: #B3B3B3; }

/* ── Tech Badge Grid ──────────────────────────────────────────── */
.tech-badge {
    background: #1A1A1A;
    color: #E8E8E8;
    border-color: rgba(255, 255, 255, 0.12);
}

.tech-badge:hover {
    background: #5865F2;
    color: #FFFFFF;
    border-color: transparent;
}

/* ── Article Cards ────────────────────────────────────────────── */
.article-card {
    background: #1E1E1E;
    border-color: rgba(255, 255, 255, 0.08);
}

.article-body {
    background: #1E1E1E;
}

.article-desc { color: #E8E8E8; }
.article-meta { color: #B3B3B3; }
.article-title { color: #FFFFFF; }

/* ── Page Buttons ─────────────────────────────────────────────── */
.page-btn--outline {
    background: transparent;
    color: #5865F2;
    border-color: #5865F2;
}

.page-btn--outline:hover {
    background: #5865F2;
    color: #FFFFFF;
}

/* ── CTA Section (page-cta) ───────────────────────────────────── */
/* page-cta inherits the gradient from --color-primary / --color-primary-dark
   which are now #5865F2 / #4752C4, giving a dark indigo CTA band.
   Text is white so no additional overrides needed. */

/* ── Legacy ray-* classes (AboutRay) ─────────────────────────── */
.ray-section {
    background: #1E1E1E;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.70);
}

.ray-section-content {
    border-color: rgba(255, 255, 255, 0.08);
    background: #1E1E1E;
}

.ray-intro {
    background: #1E1E1E;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.70);
}

.ray-intro h2 { color: #00D9FF; }

.ray-contact { background: transparent; }

.ray-tech-badge {
    background: #1A1A1A;
    color: #E8E8E8;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ray-tech-badge:hover {
    background: #5865F2;
    color: white;
}

.ray-accent {
    background-color: rgba(0, 217, 255, 0.05);
    border-left-color: #00D9FF;
    color: #E8E8E8;
}

/* ── Code inline ──────────────────────────────────────────────── */
.code-inline {
    background: #1A1A1A;
    border-color: rgba(255, 255, 255, 0.12);
    color: #00D9FF;
}