/* ================================================================
   TypingTips.in — Punjabi Section Theme  (Amber / Golden)
   Loaded on ALL Punjabi pages via master-header.php.
   Overrides main.css :root defaults and provides dark/light vars
   for every stylesheet (main.css, header.css, lang-hub.css, etc.)
================================================================ */

/* ── Dark Mode (default) ─────────────────────────────────────── */
:root {
    /* ── Accent ── */
    --theme-accent:      #FBBF24;
    --theme-accent-dk:   #D97706;
    --theme-glow:        rgba(251,191,36,0.14);

    /* ── Backgrounds ── */
    --theme-bg:          #100E05;
    --theme-surface:     #19160A;
    --theme-card:        #211D0D;

    /* ── Text ── */
    --theme-text:        #F0EAD2;
    --theme-muted:       #9A9070;
    --theme-invert:      #1C1405;

    /* ── Borders ── */
    --theme-border:      rgba(255,255,255,0.08);

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

    /* ── 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:      #FBBF24;
    --theme-accent-dk:   #D97706;
    --theme-glow:        rgba(251,191,36,0.14);

    --theme-bg:          #FFFDF0;
    --theme-surface:     #FFF8E0;
    --theme-card:        #FFFFFF;

    --theme-text:        #1C1405;
    --theme-muted:       #6A6040;
    --theme-invert:      #FFFFFF;

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

    /* Bridge vars — set explicitly so no var() chain resolution is needed */
    --text-color:          #1C1405;
    --a-color:             #FBBF24;
    --highlighttext-color: #FBBF24;
    --nav-color:           #FFFDF0;
    --background-color:    #FFF8E0;
    --border-color:        rgba(0,0,0,0.15);
    --boxshadow-color:     rgba(251,191,36,0.14);
    --lighttext-color:     #6A6040;
    --beige-color:         #6A6040;
}