/**
 * TNT CMS — Theme: Arsha
 * Bridges TNT CSS variables → Arsha CSS variables.
 * Set active_theme = 'theme-arsha' in Design → Theme & Style.
 *
 * HOW IT WORKS:
 * 1. Your Theme & Style settings set --tnt-* variables
 * 2. This file maps those to Arsha's --accent-color, --heading-color etc.
 * 3. Arsha's main.css uses those variables throughout
 * Result: Theme & Style admin controls Arsha's entire color scheme.
 *
 * FONTS:
 * Arsha uses Jost (headings), Open Sans (body), Poppins (nav).
 * If you set fonts in Theme & Style those will override these.
 */

/* ── Google Fonts used by Arsha ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800&family=Open+Sans:wght@300;400;600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* ── Map TNT variables → Arsha variables ─────────────────────────────── */
:root {
    /* Arsha font variables */
    --default-font:  var(--tnt-font-body,    "Open Sans", system-ui, sans-serif);
    --heading-font:  var(--tnt-font-heading,  "Jost", sans-serif);
    --nav-font:      "Poppins", sans-serif;

    /* Arsha color variables — driven by TNT Theme & Style settings */
    --background-color:  var(--tnt-color-bg,        #ffffff);
    --default-color:     var(--tnt-color-text,       #444444);
    --heading-color:     var(--tnt-color-heading,    #37517e);
    --accent-color:      var(--tnt-color-primary,    #47b2e4);
    --surface-color:     var(--tnt-color-card-bg,    #ffffff);
    --contrast-color:    #ffffff;

    /* Nav colors */
    --nav-color:                     var(--tnt-color-primary, #ffffff);
    --nav-hover-color:               var(--tnt-color-secondary, #47b2e4);
    --nav-mobile-background-color:   var(--tnt-color-bg, #ffffff);
    --nav-dropdown-background-color: var(--tnt-color-card-bg, #ffffff);
    --nav-dropdown-color:            var(--tnt-color-text, #444444);
    --nav-dropdown-hover-color:      var(--tnt-color-primary, #47b2e4);

    /* TNT radius carried through */
    --tnt-radius: 10px;
}

/* ── Dark background sections use secondary color ────────────────────── */
.dark-background {
    --background-color: var(--tnt-color-heading, #37517e);
    --default-color:    #ffffff;
    --heading-color:    #ffffff;
    --surface-color:    color-mix(in srgb, var(--tnt-color-heading, #37517e), white 20%);
    --contrast-color:   #ffffff;
    --accent-color:     var(--tnt-color-secondary, #47b2e4);
}

/* ── Light background sections ───────────────────────────────────────── */
.light-background {
    --background-color: color-mix(in srgb, var(--tnt-color-bg, #ffffff), #e8e8e8 15%);
    --surface-color:    var(--tnt-color-bg, #ffffff);
}

/* ── Override Bootstrap container max-width ──────────────────────────── */
.container {
    max-width: var(--tnt-container-width, 1200px);
}

/* ── Ensure Arsha sections pick up correct fonts ─────────────────────── */
body {
    font-family: var(--default-font);
    color:       var(--default-color);
    background:  var(--background-color);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color:       var(--heading-color);
}