/* ================================================================
   TypingTips.in — Root / Main Site Theme  (Seafoam Teal)
   Loaded on all root-level pages via master-header.php.
================================================================ */

/* ── Dark Mode (default) ─────────────────────────────────────── */
:root {
    --theme-accent:      #3ECFBF;
    --theme-accent-dk:   #2BB8A8;
    --theme-glow:        rgba(62,207,191,0.14);

    --theme-bg:          #0E1117;
    --theme-surface:     #161D2D;
    --theme-card:        #1C2438;

    --theme-text:        #DDE3EE;
    --theme-muted:       #8895A7;
    --theme-invert:      #0E1117;

    --theme-border:      rgba(255,255,255,0.08);

    /* ── Footer heading color (section-specific) ── */
    --footer-accent:     #3ECFBF;

    /* ── Bridge: old main.css vars ── */
    --nav-color:           var(--theme-bg);
    --background-color:    var(--theme-surface);
    --a-color:             var(--theme-accent);
    --text-color:          var(--theme-text);
    --highlighttext-color: var(--theme-accent);
    --border-color:        var(--theme-border);
    --boxshadow-color:     var(--theme-glow);
    --beige-color:         var(--theme-muted);
    --lighttext-color:     var(--theme-muted);

    /* ── Bridge: lang-hub (--lh-*) vars ── */
    --lh-accent:    var(--theme-accent);
    --lh-accent-dk: var(--theme-accent-dk);
    --lh-glow:      var(--theme-glow);
    --lh-bg:        var(--theme-bg);
    --lh-surface:   var(--theme-surface);
    --lh-card:      var(--theme-card);
    --lh-border:    var(--theme-border);
    --lh-text:      var(--theme-text);
    --lh-muted:     var(--theme-muted);
    --lh-invert:    var(--theme-invert);

    /* ── Bridge: home.css (--h-*) vars ── */
    --h-accent:       var(--theme-accent);
    --h-accent-dk:    var(--theme-accent-dk);
    --h-glow:         var(--theme-glow);
    --h-bg:           var(--theme-bg);
    --h-surface:      var(--theme-surface);
    --h-card:         var(--theme-card);
    --h-border:       var(--theme-border);
    --h-text:         var(--theme-text);
    --h-muted:        var(--theme-muted);
    --h-invert-btn:   var(--theme-invert);

    /* ── Bridge: content-page (--cp-*) vars ── */
    --cp-accent:    var(--theme-accent);
    --cp-bg:        var(--theme-bg);
    --cp-surface:   var(--theme-surface);
    --cp-card:      var(--theme-card);
    --cp-border:    var(--theme-border);
    --cp-text:      var(--theme-text);
    --cp-muted:     var(--theme-muted);
    --cp-glow:      var(--theme-glow);
}

/* ── Applied properties — override main.css on every page ─────── */
body         { background-color: var(--theme-bg)   !important; color: var(--theme-text); transition: background-color .3s, color .3s; }
nav, footer  { background-color: var(--theme-bg)   !important; color: var(--theme-text); }
.menu a      { color: var(--theme-text)  !important; }
.menu a:hover,
.menu a:focus { color: var(--theme-accent) !important; }

/* ── Light Mode ──────────────────────────────────────────────── */
body.tt-light {
    --theme-accent:      #2BB8A8;
    --theme-accent-dk:   #1E9E90;
    --theme-glow:        rgba(43,184,168,0.12);

    --theme-bg:          #F0F5FB;
    --theme-surface:     #E4EAF4;
    --theme-card:        #FFFFFF;

    --theme-text:        #1A202C;
    --theme-muted:       #627087;
    --theme-invert:      #FFFFFF;

    --theme-border:      rgba(0,0,0,0.08);
    --footer-accent:     #2BB8A8;
}