/*
 * tokens.css — BusinessPromptKit.com design tokens
 * Spec reference: Section 6 (brand palette), 7 (visual direction),
 * 8 (dark/light theme).
 *
 * Every color used elsewhere in the site's CSS MUST reference one of these
 * variables — no per-component hard-coded hex values (Section 8). The
 * active theme is controlled by a `data-theme="light"|"dark"` attribute on
 * <html>, set by the blocking inline script in theme-init.js before first
 * paint to avoid a flash of the wrong theme.
 */

/*
 * Self-hosted Inter (variable font — covers weights 100–900 in one file).
 * No third-party font CDN is used (avoids an unnecessary external
 * dependency and the GDPR/IP-exposure concern of linking Google Fonts
 * directly — Section 69/72). License: SIL OFL 1.1, see
 * assets/fonts/Inter-OFL.txt. Path is relative to this stylesheet's own
 * location, so it resolves correctly under any mount point.
 */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Brand palette (Section 6) — never change these hex values ---- */
    --bpk-deep-navy: #172B3A;
    --bpk-signal-orange: #F59E0B;
    --bpk-white: #FFFFFF;
    --bpk-mono-black: #111111;

    /* ---- Neutral scale derived for editorial/SaaS whitespace (Section 7) ---- */
    --bpk-neutral-50: #F7F8F9;
    --bpk-neutral-100: #EDEFF1;
    --bpk-neutral-300: #C7CDD3;
    --bpk-neutral-600: #5B6672;

    /* ---- Typography (Section 7): Inter, Geist, or Manrope ---- */
    --bpk-font-sans: 'Inter', 'Geist', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ---- Motion ---- */
    --bpk-transition-fast: 120ms ease;
    --bpk-transition-theme: 150ms ease;
}

/*
 * LIGHT theme (default) — also the fallback if the blocking script hasn't
 * run yet for any reason, so a flash never shows the dark background.
 */
:root,
[data-theme="light"] {
    --bg-page: var(--bpk-white);
    --bg-surface: var(--bpk-neutral-50);
    --bg-surface-alt: var(--bpk-neutral-100);
    --bg-band-dark: var(--bpk-deep-navy);      /* full-bleed dark band sections, Section 7 */

    --text-primary: var(--bpk-deep-navy);
    --text-secondary: var(--bpk-neutral-600);
    --text-on-dark: var(--bpk-white);

    --accent: var(--bpk-signal-orange);
    --accent-contrast-text: var(--bpk-deep-navy);
    --link-accent: #B45309;  /* darker, WCAG AA-passing orange for text links on light backgrounds; --bpk-signal-orange itself fails 4.5:1 against white */

    --button-primary-bg: var(--bpk-deep-navy);
    --button-primary-text: var(--bpk-white);
    --button-accent-bg: var(--bpk-signal-orange);
    --button-accent-text: var(--bpk-deep-navy);

    --border-subtle: var(--bpk-neutral-300);
    --focus-ring: var(--bpk-signal-orange);

    /* ---- Semantic positive/negative (comparison lists, status text) ---- */
    --positive: #1B7F3A;
    --negative: #B3261E;

    /*
     * Brand asset naming (per Brand Assets README): "-light" files are the
     * LIGHT-BACKGROUND treatment (navy ink, readable on a light page) and
     * "-dark" files are the DARK-BACKGROUND treatment (white ink, readable
     * on a dark page) — the suffix describes the background it's built
     * for, not the ink color. Paths are relative to this stylesheet's own
     * location (assets/css/), so they resolve correctly regardless of
     * which URL path or subdirectory the site itself is mounted under.
     */
    --logo-lockup: url('../img/brand/businesspromptkit-logo-light.svg'); /* navy ink, for light bg */
    --icon-mark: url('../img/brand/businesspromptkit-icon-light.svg');   /* navy ink, for light bg */
}

/* DARK theme */
[data-theme="dark"] {
    --bg-page: var(--bpk-mono-black);
    --bg-surface: #1A1D21;
    --bg-surface-alt: #22262B;
    --bg-band-dark: #0D1620;

    --text-primary: var(--bpk-white);
    --text-secondary: var(--bpk-neutral-300);
    --text-on-dark: var(--bpk-white);

    --accent: var(--bpk-signal-orange);
    --accent-contrast-text: var(--bpk-mono-black);
    --link-accent: var(--bpk-signal-orange);  /* full-brightness orange already passes contrast against dark backgrounds */

    --button-primary-bg: var(--bpk-signal-orange);
    --button-primary-text: var(--bpk-deep-navy);
    --button-accent-bg: var(--bpk-signal-orange);
    --button-accent-text: var(--bpk-deep-navy);

    --border-subtle: #33383E;
    --focus-ring: var(--bpk-signal-orange);

    /* ---- Semantic positive/negative — lightened for contrast on dark bg ---- */
    --positive: #4ADE80;
    --negative: #FF6B6B;

    /* white ink, for dark bg — never the light-on-light / dark-on-dark
       combinations the brand rules prohibit (Section 6) */
    --logo-lockup: url('../img/brand/businesspromptkit-logo-dark.svg');
    --icon-mark: url('../img/brand/businesspromptkit-icon-dark.svg');
}

body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--bpk-font-sans);
    transition: background-color var(--bpk-transition-theme), color var(--bpk-transition-theme);
}

/*
 * Brand mark utilities — render via the theme-aware --logo-lockup /
 * --icon-mark variables above, so the correct light/dark-background
 * treatment is always shown automatically the instant data-theme changes
 * (toggle or system-preference), with no JavaScript needed to swap an
 * <img src>. Usage: <div class="brand-logo" role="img" aria-label="BusinessPromptKit"></div>
 */
.brand-logo {
    display: inline-block;
    height: 40px;
    aspect-ratio: 740 / 117; /* matches the logo SVG's native viewBox proportions */
    background-image: var(--logo-lockup);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.brand-icon {
    display: inline-block;
    height: 48px;
    aspect-ratio: 191 / 117; /* matches the icon SVG's native viewBox proportions */
    background-image: var(--icon-mark);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Respect prefers-reduced-motion (Section 80 accessibility acceptance) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Visible focus states on all interactive elements (Section 80) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}