/* ══════════════════════════════════════
   SECTION THEMES
   The template alternates white / off-white / black bands down the page.
   Re-declaring the same variable names inside a section flips every
   component nested in it (cards, links, borders, buttons…) to the right
   contrast automatically — no component rules need to change.
══════════════════════════════════════ */
#fonts, #contact, .about-section,
.portfolio-hero, .blog-hero, .project-hero, #project-docs-section,
.article-hero, .policy-hero, .global-container {
    --bg:        #ffffff;
    --bg-1:      #ffffff;
    --bg-2:      #ffffff;
    --bg-3:      #f2f2f2;
    --surface:   rgba(0,0,0,0.035);
    --surface-2: rgba(0,0,0,0.06);
    --border:    rgba(0,0,0,0.13);
    --border-gold: rgba(0,0,0,0.32);

    --text-primary:   #000000;
    --text-secondary: #555555;
    --text-muted:     #888888;

    --gold-50:  #000000;
    --gold-100: #1a1a1a;
    --gold-200: #333333;
    --gold-300: #555555;
    --gold-400: #000000;
    --gold-500: #000000;
    --gold-600: #1a1a1a;
    --gold-700: #4d4d4d;
    --gold-800: #777777;
    --gold-900: #a6a6a6;
    --gold-950: #cccccc;

    /* Re-freeze the alias block at THIS scope's values too — aliases
       declared once at :root would otherwise stay locked to the root
       (dark) values regardless of this override. */
    --brand-50:  var(--gold-50);
    --brand-100: var(--gold-100);
    --brand-200: var(--gold-200);
    --brand-300: var(--gold-300);
    --brand-400: var(--gold-400);
    --brand-500: var(--gold-500);
    --brand-600: var(--gold-600);
    --brand-700: var(--gold-700);
    --brand-800: var(--gold-800);
    --brand-900: var(--gold-900);
    --brand-950: var(--gold-950);

    /* CSS inheritance of `color` freezes at whatever ancestor last set it
       explicitly (body, in this case) — redeclaring --text-primary above
       does NOT by itself change what plain text inherits. Re-declare
       `color` here too so every descendant without its own color rule
       (not just ones that reference the variable directly) gets the
       right value. */
    color: var(--text-primary);

    background-color: #ffffff;
}

.systems, .faq-section {
    --bg:        #efefef;
    --bg-1:      #efefef;
    --bg-2:      #efefef;
    --bg-3:      #e2e2e2;
    --surface:   rgba(0,0,0,0.035);
    --surface-2: rgba(0,0,0,0.06);
    --border:    rgba(0,0,0,0.13);
    --border-gold: rgba(0,0,0,0.32);

    --text-primary:   #000000;
    --text-secondary: #555555;
    --text-muted:     #888888;

    --gold-50:  #000000;
    --gold-100: #1a1a1a;
    --gold-200: #333333;
    --gold-300: #555555;
    --gold-400: #000000;
    --gold-500: #000000;
    --gold-600: #1a1a1a;
    --gold-700: #4d4d4d;
    --gold-800: #777777;
    --gold-900: #a6a6a6;
    --gold-950: #cccccc;

    --brand-50:  var(--gold-50);
    --brand-100: var(--gold-100);
    --brand-200: var(--gold-200);
    --brand-300: var(--gold-300);
    --brand-400: var(--gold-400);
    --brand-500: var(--gold-500);
    --brand-600: var(--gold-600);
    --brand-700: var(--gold-700);
    --brand-800: var(--gold-800);
    --brand-900: var(--gold-900);
    --brand-950: var(--gold-950);

    color: var(--text-primary);

    background-color: #efefef;
}

/* Inner-page <main> wrappers just need a white canvas behind their (already
   themed) hero/content sections so no dark body-background shows between
   them on pages with multiple sibling sections. */
body.inner-page main { background-color: #ffffff; }