/* hcs-dog core — HCS Stratejus design tokens (matches docs/day-of-giving.html reference) */

:root {
    /* === HCS Stratejus brand palette === */
    --hcs-teal: #206D78;
    --hcs-teal-deep: #1a5760;
    --hcs-navy: #00476c;
    --hcs-navy-mid: #0d5479;
    --giving-orange: #ff6900;
    --giving-orange-rgb: 255, 105, 0;
    --giving-amber: #fcb900;
    --giving-amber-rgb: 252, 185, 0;
    --hcs-cream: #f2f1ec;
    --hcs-beige: #f5f2e5;
    --hcs-warm-gray: #efeae4;
    --hcs-light-border: #e3ddd2;
    --hcs-text: #1a1a1a;
    --hcs-text-muted: #4a4a4a;
    --hcs-text-soft: rgba(255, 255, 255, 0.85);

    /* === Gradients (reference :40-44) === */
    --giving-gradient: linear-gradient(135deg, #ff6900 0%, #fcb900 100%);
    --dark-gradient: linear-gradient(135deg, #00476c 0%, #0d5479 50%, #206D78 100%);

    /* === Backwards-compatible WP-preset aliases (component CSS still references these) === */
    --wp--preset--color--base: #FFFFFF;
    --wp--preset--color--contrast: var(--hcs-text);
    --wp--preset--color--accent-1: var(--hcs-navy);
    --wp--preset--color--accent-2: var(--hcs-teal);
    --wp--preset--color--accent-3: var(--giving-orange);
    --wp--preset--color--cta-bg: var(--giving-orange);
    --wp--preset--color--cta-fg: #FFFFFF;
    --wp--preset--color--accent-4: var(--hcs-navy);
    --wp--preset--color--success: #1A8754;
    --wp--preset--color--warning: var(--giving-amber);
    --wp--preset--color--error: #C62828;
    --wp--preset--color--gray-50: var(--hcs-cream);
    --wp--preset--color--gray-100: var(--hcs-beige);
    --wp--preset--color--gray-300: var(--hcs-light-border);
    --wp--preset--color--gray-600: var(--hcs-text-muted);
    --wp--preset--color--gray-900: var(--hcs-text);
    --wp--preset--color--white: #FFFFFF;
    --wp--preset--color--black: #000000;

    /* === Font families (reference uses Oswald display, Open Sans body, Roboto Slab accent) === */
    --hcs-font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --hcs-font-body: 'Open Sans', system-ui, sans-serif;
    --hcs-font-accent: 'Roboto Slab', Georgia, serif;
    --wp--preset--font-family--heading: var(--hcs-font-display);
    --wp--preset--font-family--body: var(--hcs-font-body);
    --wp--preset--font-family--mono: 'Roboto Mono', monospace;

    /* === Font sizes === */
    --wp--preset--font-size--tiny: 0.6875rem;
    --wp--preset--font-size--x-small: 0.8125rem;
    --wp--preset--font-size--small: 0.9375rem;
    --wp--preset--font-size--base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --wp--preset--font-size--medium: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    --wp--preset--font-size--large: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);
    --wp--preset--font-size--x-large: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
    --wp--preset--font-size--title: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);

    /* === Spacing === */
    --wp--preset--spacing--10: 0.25rem;
    --wp--preset--spacing--20: 0.5rem;
    --wp--preset--spacing--30: 0.75rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--55: 2rem;
    --wp--preset--spacing--60: 2.5rem;
    --wp--preset--spacing--70: 4.5rem;
    --wp--preset--spacing--80: 7.5rem;

    /* === Shadows === */
    --wp--preset--shadow--subtle: 0 1px 3px rgba(0, 71, 108, 0.06);
    --wp--preset--shadow--card: 0 4px 16px rgba(0, 71, 108, 0.08);
    --wp--preset--shadow--elevated: 0 8px 24px rgba(0, 71, 108, 0.14);
    --wp--preset--shadow--dramatic: 0 16px 48px rgba(0, 71, 108, 0.22);
    --shadow-card: var(--wp--preset--shadow--card);
    --shadow-elevated: var(--wp--preset--shadow--elevated);
    --shadow-dramatic: var(--wp--preset--shadow--dramatic);

    /* === Border radius === */
    --wp--preset--border-radius--x-small: 4px;
    --wp--preset--border-radius--small: 6px;
    --wp--preset--border-radius--card: 8px;
    --wp--preset--border-radius--medium: 12px;
    --wp--preset--border-radius--large: 16px;
    --wp--preset--border-radius--x-large: 20px;
    --wp--preset--border-radius--full: 9999px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* === Legacy gradient aliases === */
    --wp--preset--gradient--hero-overlay: linear-gradient(135deg, rgba(0, 71, 108, 0.92) 0%, rgba(32, 109, 120, 0.6) 100%);
    --wp--preset--gradient--dark-diagonal: var(--dark-gradient);
    --wp--preset--gradient--accent-bar: var(--giving-gradient);
    --wp--preset--gradient--giving-gradient: var(--giving-gradient);

    /* === Layout === */
    --content-size: 720px;
    --wide-size: 1200px;

    /* === Frontend-only helper tokens === */
    --dog-percent: 0;
    --dog-transition: 2800ms cubic-bezier(.16, .84, .44, 1);

    /* === Component helpers === */
    --wp--preset--color--backdrop: rgba(0, 30, 50, 0.72);
    --wp--preset--color--video-bg: #000000;
    --wp--preset--size--close-btn: 36px;
    --wp--preset--size--close-offset: 12px;
}

/* === Scoped reset === */
[data-hcs-dog-component] *,
[data-hcs-dog-component] *::before,
[data-hcs-dog-component] *::after { box-sizing: border-box; }
[data-hcs-dog-component] {
    font-family: var(--hcs-font-body);
    line-height: 1.5;
    color: var(--hcs-text);
}
[data-hcs-dog-component] h1,
[data-hcs-dog-component] h2,
[data-hcs-dog-component] h3,
[data-hcs-dog-component] h4 {
    font-family: var(--hcs-font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.15;
    margin: 0;
}

/* === Screen-reader-only helper === */
.hcs-dog-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    [data-hcs-dog-component] * { animation: none !important; transition: none !important; }
}