/* ================================================================
   TypingTips.in — Hindi Section Theme  (Orange)
   Loaded on ALL Hindi pages via master-header.php.
================================================================ */

/* ── Dark Mode (default) ─────────────────────────────────────── */
:root {
    --theme-accent:      #FB923C;
    --theme-accent-dk:   #EA6C1A;
    --theme-glow:        rgba(251,146,60,0.15);

    --theme-bg:          #110C07;
    --theme-surface:     #1A1209;
    --theme-card:        #221910;

    --theme-text:        #F0E4D5;
    --theme-muted:       #9A8070;
    --theme-invert:      #1C1008;

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

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

    /* ── 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);
}

/* ── 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:      #FB923C;
    --theme-accent-dk:   #EA6C1A;
    --theme-glow:        rgba(251,146,60,0.15);

    --theme-bg:          #FFF8F2;
    --theme-surface:     #FFF0E5;
    --theme-card:        #FFFFFF;

    --theme-text:        #1C1008;
    --theme-muted:       #7A6050;
    --theme-invert:      #FFFFFF;

    --theme-border:      rgba(0,0,0,0.15);
    --footer-accent:     #FB923C;

    /* Bridge vars — set explicitly so no var() chain resolution is needed */
    --text-color:          #1C1008;
    --a-color:             #FB923C;
    --highlighttext-color: #FB923C;
    --nav-color:           #FFF8F2;
    --background-color:    #FFF0E5;
    --border-color:        rgba(0,0,0,0.15);
    --boxshadow-color:     rgba(251,146,60,0.15);
    --lighttext-color:     #7A6050;
    --beige-color:         #7A6050;
}