/* ============================================================
   LIGHT THEME
   To activate: swap dark.css → light.css in App.razor
   ============================================================ */

:root {
    /* ── Core palette ── */
    --bg:           #ffffff;
    --bg-2:         #f4f6fb;
    --surface:      rgba(0, 0, 0, 0.045);
    --surface-2:    rgba(0, 0, 0, 0.08);
    --border:       rgba(0, 0, 0, 0.10);
    --border-glow:  rgba(220, 38, 38, 0.45);

    --accent:       #dc2626;
    --accent-light: #ef4444;
    --accent-dark:  #b91c1c;
    --accent-glow:  rgba(220, 38, 38, 0.22);

    --cyan:         #991b1b;
    --cyan-light:   #dc2626;
    --cyan-dark:    #7f1d1d;
    --cyan-glow:    rgba(153, 27, 27, 0.15);

    --text:         #0f172a;
    --text-muted:   rgba(15, 23, 42, 0.62);
    --text-dim:     rgba(15, 23, 42, 0.38);

    --grad:         linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
    --grad-text:    linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);

    --nav-bg:       rgba(255, 255, 255, 0.88);
    --nav-border:   rgba(0, 0, 0, 0.08);
    --drawer-bg:    rgba(255, 255, 255, 0.99);

    /* ── Legacy theme vars ── */
    --theme-primary:              var(--accent);
    --theme-primary-dark:         var(--accent-dark);
    --theme-primary-light:        var(--accent-light);
    --theme-primary-text:         white;
    --theme-secondary:            var(--cyan);
    --theme-secondary-dark:       var(--cyan-dark);
    --theme-secondary-light:      var(--cyan-light);
    --theme-secondary-text:       white;
    --theme-dark:                 var(--bg);
    --theme-dark-border:          var(--border);
    --theme-dark-hover:           var(--surface-2);
    --theme-dark-text:            var(--text);
    --theme-neutral:              var(--bg-2);
    --theme-neutral-dark:         var(--border);
    --theme-neutral-text:         var(--text);
    --theme-body-bg:              var(--bg);
    --theme-body-text:            var(--text-muted);
    --theme-navigation-color:     var(--text);
    --theme-navigation-hover:     var(--accent-light);
    --theme-navigation-hover1:    var(--cyan-light);
    --theme-button-primary-bg:    var(--accent);
    --theme-button-primary-text:  white;
    --theme-button-primary-border: var(--accent-dark);
    --theme-button-primary-hover:  var(--accent-light);
    --theme-button-secondary-bg:   transparent;
    --theme-button-secondary-text: var(--text);
    --theme-button-secondary-border: var(--border);
    --theme-button-secondary-hover:  var(--surface-2);
    --theme-button-dark-bg:        var(--surface);
    --theme-button-dark-text:      var(--text);
    --theme-button-dark-border:    var(--border);
    --theme-button-dark-hover:     var(--surface-2);
    --theme-font-weight:           400;
    --theme-colorDarkHover:        var(--cyan);
    --theme-muted:                 var(--text-dim);
}

/* ── Code blocks ── */
pre {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.10);
    color: #1e293b;
}

/* ── Hero blobs: crimson on white ── */
.blob-1 { background: radial-gradient(circle, rgba(220,38,38,0.13) 0%, transparent 70%); }
.blob-2 { background: radial-gradient(circle, rgba(185,28,28,0.09) 0%, transparent 70%); }
.blob-3 { background: radial-gradient(circle, rgba(220,38,38,0.06) 0%, transparent 70%); }

/* ── Dot grid overlay ── */
.hero-grid-overlay {
    background-image: radial-gradient(rgba(220,38,38,0.10) 1px, transparent 1px);
}

/* ── Avatar ring gap color ── */
.avatar-img {
    border-color: #ffffff !important;
    background: #ffffff !important;
}

/* ── Select options ── */
select option {
    background: #ffffff;
    color: #0f172a;
}

/* ── Resume card wrapper: keep contrast ── */
.content-wrapper:has(.resume-page) {
    background: var(--bg-2);
}