/* =========================================================
   Digital Potion — brand.css (CLEAN)
   - Defines palette + semantic roles + header/footer tokens
   - Defines button tokens ONCE (primary/secondary/accent)
========================================================= */

:root {
    /* Raw Digital Potion swatches */
    --dp-slate: #3d4d4a;
    --dp-navy: #4c646c;
    --dp-blue: #51758c;
    --dp-grey: #c7dcea;
    --dp-green: #5aba47;
    --dp-yellow: #e3e52b;
    --dp-cyan: #00afdf;
    --dp-pink: #ee4c9b;
    /* Fonts */
    --ps-font-body: 'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ps-font-heading: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* PotionStarter semantic roles (global) */
    --ps-primary: var(--dp-slate);
    --ps-secondary: var(--dp-grey);
    --ps-accent: var(--dp-yellow);
    --ps-surface: #ffffff;
    --ps-muted: var(--dp-grey);
    --ps-ink: var(--dp-slate);
    --ps-ink-contrast: #ffffff;
    --ps-inverse-bg: var(--dp-slate);
    --ps-inverse-text: #ffffff;
    /* Links (default content) */
    --ps-link: var(--ps-accent);
    --ps-link-hover: var(--ps-primary);
    /* Header / footer */
    --ps-header-bg: var(--dp-navy);
    --ps-footer-bg: var(--dp-slate);
    --ps-footer-link: rgba(255,255,255,.75);
    --ps-footer-link-hover: #ffffff;
    /* NAV LINK MAPPING (for header nav variants) */
    /* primary link = yellow, secondary link = white, accent link = pink, muted link = grey */
    --ps-header-link-primary: var(--dp-yellow);
    --ps-header-link-secondary: #ffffff;
    --ps-header-link-accent: var(--dp-pink);
    --ps-header-link-muted: rgba(255,255,255,.65);
    --ps-header-link-hover: #ffffff;
    /* Button tokens (used everywhere including nav buttons) */
    /* Primary button = yellow pill w/ slate text */
    --ps-btn-primary-bg: var(--dp-yellow);
    --ps-btn-primary-text: var(--dp-slate);
    --ps-btn-primary-hover-bg: color-mix(in srgb, var(--dp-yellow) 88%, #000);
    --ps-btn-primary-hover-text: var(--dp-slate);
    /* Secondary button = white “surface” pill in header contexts (works everywhere) */
    --ps-btn-secondary-bg: rgba(255,255,255,.18);
    --ps-btn-secondary-text: #ffffff;
    --ps-btn-secondary-hover-bg: rgba(255,255,255,.30);
    --ps-btn-secondary-hover-text: #ffffff;
    /* Accent button = pink */
    --ps-btn-accent-bg: var(--dp-pink);
    --ps-btn-accent-text: #ffffff;
    --ps-btn-accent-hover-bg: color-mix(in srgb, var(--dp-pink) 88%, #000);
    --ps-btn-accent-hover-text: #ffffff;
    /* Optional helpers used by hero */
    --ps-white: #ffffff;
    --ps-yellow: var(--dp-yellow);
    --ps-slate: var(--dp-slate);
    /* Optional status roles */
    --ps-success: var(--dp-green);
    --ps-warning: var(--dp-yellow);
    /* Bootstrap alignment (optional) */
    --bs-primary: var(--ps-primary);
    --bs-secondary: var(--ps-secondary);
    --bs-link-color: var(--ps-link);
    --bs-link-hover-color: var(--ps-link-hover);
}