/**
 * TNT CMS — Theme: Devin
 * Bridges TNT CSS variables → Devin CSS variables.
 * Set active_theme = 'theme-devin' in Design → Theme & Style.
 *
 * Devin uses: Questrial (headings), Roboto (body), Open Sans (nav)
 */

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

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

    --background-color: var(--tnt-color-bg,      #ffffff);
    --default-color:    var(--tnt-color-text,     #535d6b);
    --heading-color:    var(--tnt-color-heading,  #344761);
    --accent-color:     var(--tnt-color-primary,  #5c99ee);
    --surface-color:    var(--tnt-color-card-bg,  #ffffff);
    --contrast-color:   #ffffff;

    --nav-color:                     var(--tnt-color-text,    rgba(83,93,107,.875));
    --nav-hover-color:               var(--tnt-color-heading, #0b1e38);
    --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,    #535d6b);
    --nav-dropdown-hover-color:      var(--tnt-color-primary, #5c99ee);
}

.dark-background {
    --background-color: #060606;
    --default-color:    #ffffff;
    --heading-color:    #ffffff;
    --surface-color:    #252525;
    --contrast-color:   #ffffff;
    --accent-color:     var(--tnt-color-secondary, #5c99ee);
}

.light-background {
    --background-color: color-mix(in srgb, var(--tnt-color-bg, #ffffff), #e8f0fb 20%);
    --surface-color:    var(--tnt-color-bg, #ffffff);
}

/* ── Base overrides ───────────────────────────────────────────────────── */
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);
}
.container {
    max-width: var(--tnt-container-width, 1200px);
}