/* =========================================================
   Dragonfly Art — brand tokens only
   Loaded AFTER brand.css, BEFORE site.css
========================================================= */

:root {
    /* --- DF palette --- */
    --df-surface: #F3F1EC; /* Primary Background */
    --df-muted: #D1D6C3; /* Secondary Background */
    --df-primary: #087F6F; /* Primary */
    --df-secondary: #124C4C; /* Secondary */
    --df-accent: #D30D49; /* Accent */
    --df-ink: #303D45; /* Text */
    /* Optional useful neutrals */
    --df-line: color-mix(in srgb, var(--df-ink) 14%, transparent);
    --df-ink-muted: color-mix(in srgb, var(--df-ink) 70%, var(--df-surface));
    /* --- Core semantic roles (PotionStarter) --- */
    --ps-surface: var(--df-surface);
    --ps-muted: var(--df-muted);
    --ps-ink: var(--df-ink);
    --ps-ink-contrast: var(--df-surface);
    --ps-primary: var(--df-primary);
    --ps-secondary: var(--df-secondary);
    --ps-accent: var(--df-accent);
    /* --- Default content links --- */
    --ps-link: var(--df-secondary);
    --ps-link-hover: var(--df-primary);
    /* --- Header / footer surfaces --- */
    --ps-header-bg: var(--df-secondary);
    --ps-footer-bg: var(--df-secondary);
    /* --- Header nav link mapping (canonical nav reads these) --- */
    --ps-header-link-primary: var(--df-surface);
    --ps-header-link-secondary: var(--df-secondary);
    --ps-header-link-accent: var(--df-muted);
    --ps-header-link-muted: color-mix(in srgb, var(--df-ink) 60%, transparent);
    --ps-header-link-hover: var(--df-primary);
    /* --- Footer links (recommended DF mapping) --- */
    --ps-footer-link: var(--df-surface);
    --ps-footer-link-hover: color-mix(in srgb, var(--df-surface) 80%, var(--df-accent));
    /* --- Buttons --- */
    --ps-btn-primary-bg: var(--df-primary);
    --ps-btn-primary-text: var(--df-surface);
    --ps-btn-primary-hover-bg: color-mix(in srgb, var(--df-primary) 88%, #000);
    --ps-btn-primary-hover-text: var(--df-surface);
    --ps-btn-secondary-bg: var(--df-surface);
    --ps-btn-secondary-text: var(--df-secondary);
    --ps-btn-secondary-hover-bg: color-mix(in srgb, var(--df-surface) 88%, var(--df-muted));
    --ps-btn-secondary-hover-text: var(--df-secondary);
    --ps-btn-accent-bg: var(--df-accent);
    --ps-btn-accent-text: var(--df-surface);
    --ps-btn-accent-hover-bg: color-mix(in srgb, var(--df-accent) 88%, #000);
    --ps-btn-accent-hover-text: var(--df-surface);
    /* --- Optional borders/lines (safe fallbacks) --- */
    --ps-line: var(--df-line);
    --ps-border-muted: color-mix(in srgb, var(--df-ink) 12%, transparent);
    /* --- Optional “on background” helpers --- */
    --ps-on-bg-text: var(--ps-ink);
    --ps-on-bg-link: var(--ps-link);
    --ps-on-bg-link-hover: var(--ps-link-hover);
    /* --- Typography (Dragonfly Art) --- */
    /* Body + headings = DM Sans */
    --ps-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ps-font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Brand name only = Times */
    --ps-font-brand: "Times New Roman", Times, serif;
}