/* ================================================================
   TCN BASE — tokens, base type, buttons.
   The look is the channel template (THECOMISSION Dark Premium Concept, #dan):
   navy hero bands with a teal accent, Impact display type, Manrope body,
   light paper content, white cards, hairline rules, pill buttons.

   Two token scopes:
     :root       light surfaces (paper, white cards, navy ink)
     .on-dark    navy surfaces (heroes, header, cart, modals) — white ink, bright teal
   Components never hard-code colours; they read these tokens, so the same
   component works on a light band and on a navy band.
   ================================================================ */
:root {
    color-scheme: light;

    /* the palette */
    --navy:    #07142f;
    --navy-2:  #0c1d3e;
    --navy-3:  #10244a;
    --black:   #05070c;
    --teal:    #21c5d5;
    --teal-2:  #0b8798;     /* teal for text/fills on light */
    --green:   #12bd64;
    --red:     #ee252c;
    --sky:     #a8e1f4;
    --sky-2:   #d5eef7;

    /* light surfaces (default) */
    --paper:   #f4f7f3;
    --paper-2: #e9efec;
    --panel:   #ffffff;
    --panel-2: #eef3f6;
    --ink:     #091126;
    --muted:   #44506a;
    --faint:   #637087;
    --line:        rgba(9,17,38,.12);
    --line-strong: rgba(9,17,38,.28);
    --accent:   var(--teal-2);   /* teal as text / small fills on light */
    --accent-2: #0a6f7e;
    --on-accent: #ffffff;        /* text on an accent fill */
    --inverse:  #ffffff;         /* text on an ink fill */
    --shadow:   0 24px 60px rgba(7,20,47,.16);
    --radius:   6px;

    --dp-display: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;
    --dp-serif:   var(--dp-display);      /* legacy name: every "title" font is the display face */
    --dp-sans:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* legacy tokens (style.css, tcn-app.css, inline template blocks read these) */
    --clr-bg:            var(--paper);
    --clr-surface:       var(--panel);
    --clr-surface-light: var(--panel-2);
    --clr-primary:       var(--accent);
    --clr-primary-tint:  var(--sky);
    --clr-primary-soft:  rgba(11,135,152,.10);
    --clr-primary-soft-border: rgba(11,135,152,.28);
    --clr-accent:        var(--red);
    --clr-error:         #d6342c;
    --clr-error-soft:    rgba(214,52,44,.10);
    --clr-text-main:     var(--ink);
    --clr-text-muted:    var(--muted);
    --clr-border:        var(--line);
    --clr-invert-bg:     var(--ink);
    --clr-invert-text:   var(--inverse);
    --clr-invert-text-muted: rgba(255,255,255,.7);

    --font-main:    var(--dp-sans);
    --font-title:   var(--dp-display);
    --ff-heading:   var(--dp-display);
    --font-display: var(--dp-display);

    --dept-color: var(--accent);
    --dept-rgb: 11,135,152;
    --ed-default: #3a7bb8;   /* channel / department hue when a page sets none */
    --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* navy surfaces: white ink, bright teal, translucent hairlines */
.on-dark, .site-header, .tcn-bottom-nav, .tcn-install-banner {
    --paper:   var(--navy);
    --paper-2: var(--navy-2);
    --panel:   var(--navy-2);
    --panel-2: var(--navy-3);
    --ink:     #ffffff;
    --muted:   #b7c8e4;
    --faint:   #8da3c7;
    --line:        rgba(255,255,255,.16);
    --line-strong: rgba(255,255,255,.34);
    --accent:   var(--teal);
    --accent-2: #5fdbe6;
    --on-accent: #021018;
    --inverse:  var(--navy);
    --shadow:   0 30px 80px rgba(0,0,0,.5);
    --clr-bg: var(--paper); --clr-surface: var(--panel); --clr-surface-light: var(--panel-2);
    --clr-text-main: var(--ink); --clr-text-muted: var(--muted); --clr-border: var(--line);
    --clr-primary: var(--accent); --clr-invert-bg: var(--ink); --clr-invert-text: var(--inverse);
    color: var(--ink);
}

/* ── base ── */
html { background: var(--paper); scroll-behavior: smooth; }
body {
    background: var(--paper) !important;
    background-image: none !important;
    color: var(--ink);
    font-family: var(--dp-sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
body::before, body::after { background-image: none !important; }
::selection { background: var(--teal); color: #021018; }

h1, h2, h3, .page-title, .entry-title {
    font-family: var(--dp-display);
    font-weight: 400;
    letter-spacing: .015em;
    text-transform: uppercase;
    color: var(--ink);
}
a { color: inherit; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* small uppercase label (kickers, section labels) */
.eyebrow {
    font: 800 10px/1 var(--dp-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ── buttons: ink block, teal on hover (the template's .dts-action) ── */
.btn, .button, button.button, a.button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .tcn-cart-checkout-btn, .modal-action-btn {
    font-family: var(--dp-sans) !important;
    border-radius: 3px !important;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background .2s, color .2s, border-color .2s, filter .2s;
}
.btn.primary, .btn-primary, .button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt,
.tcn-cart-checkout-btn, .modal-action-btn {
    background: var(--ink) !important;
    color: var(--inverse) !important;
    border: 1px solid var(--ink) !important;
}
.btn.primary:hover, .btn-primary:hover, .button.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .tcn-cart-checkout-btn:hover, .modal-action-btn:hover {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #021018 !important;
}

/* legacy markup that still renders inside pages */
.dpt2-license-pill { border-radius: 999px; }
.ch-premium-code, .ch-pcc-content { background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}