/* Theme Name: NTAA Theme Theme URI: https://example.com/ntaa-theme Description: Lightweight display-only theme built to pair with the NTAAwp affiliate plugin. The plugin handles products, cards, affiliate links, click tracking and (with Rank Math) SEO; the theme provides only the editorial shell. Author: NTAAwp Version: 1.3.1 Requires at least: 6.2 Tested up to: 7.0 Requires PHP: 8.0 Requires Plugins: ntaawp License: GPL-2.0-or-later Text Domain: ntaa-theme */ /* This file only carries the theme header + design tokens. All real styling lives in assets/css/theme.css (enqueued in functions.php). Dark mode: assets/js/theme.js sets data-theme="dark"|"light" on before first paint (see the inline script in header.php) — the override block below only needs to redefine the same token names. */ :root{ /* Earthy brand palette (site owner-supplied swatch), tuned for a cleaner, less muddy result than a literal swatch dump: a light, barely-tinted cream canvas (not the swatch's full-strength tan, which read as heavy across large areas) with white content cards, a rust-brown accent taken straight from the swatch (also anchors the header's divider line and every button), navy ink, dark sage for secondary text. */ --accent:#7f4b30; --accent-hover:#5f3824; /* accent, darkened ~25% for hover/press states */ --accent-ink:#fff; --ink:#314159; --text-secondary:#55617a; --muted:#4b513f; /* darkened sage — the swatch's #7d8769 fails WCAG AA (~2.3:1) on the cream backgrounds */ --subtle:#ae9372; --line:#e1d9c9; /* swatch's own light neutral (was an invented e8ddc9) */ --line-strong:#ae9372; /* same swatch tan as --subtle — appropriate at this small a UI scale */ --bg:#faf6ef; --bg-soft:#f1e8d8; --surface:#ffffff; --surface-hover:#faf5ec; /* Semantic — used by the editorial callout blocks in theme.css */ --success:#1a7f4e; --success-bg:#e7f7ee; --warning:#9a6b00; --warning-bg:#fff6e0; --danger:#b3261e; --danger-bg:#fdecea; --info:#1d5fae; --info-bg:#e8f1fc; --maxw:1140px; --content-maxw:760px; --radius-sm:6px; --radius:10px; --radius-lg:16px; --shadow-sm:0 1px 2px rgba(16,24,40,.04); --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --shadow-lg:0 8px 24px rgba(16,24,40,.10); --ease:cubic-bezier(.4,0,.2,1); --dur-fast:150ms; --dur:250ms; --z-header:50; --z-dropdown:60; --z-mobile-nav:70; --z-modal:90; --z-toast:100; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } [data-theme="dark"]{ /* Same earthy family, inverted: warm dark-brown canvas instead of navy, so dark mode still reads as "the same site" rather than a generic dark-gray theme. Accent swaps to the swatch's lighter camel-brown for visibility against the dark canvas — same rust-brown family as light mode's --accent, just the lighter of the swatch's two browns. */ --accent:#b27d57; --accent-hover:#7f4b30; /* light mode's --accent, reused as the darker hover shade */ --accent-ink:#1a1210; --ink:#ede7da; --text-secondary:#c7bfae; --muted:#a8b39a; --subtle:#8f9787; --line:#3a3830; --line-strong:#4a473c; --bg:#1c1a16; --bg-soft:#262319; --surface:#2a2620; --surface-hover:#322d24; --success:#3fd08a; --success-bg:#0f2b1f; --warning:#f0b840; --warning-bg:#332508; --danger:#f3746c; --danger-bg:#3a1613; --info:#6ea8f0; --info-bg:#132038; --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --shadow-lg:0 8px 24px rgba(0,0,0,.55); }