/**
 * HairStyleMojo Design Tokens
 *
 * Shared CSS custom properties used across header, footer,
 * archive templates, and future components.
 *
 * @package HelloBizChild
 * @since   1.2.0
 */

:root {
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Brand Blues */
    --blue: #4A8FE7;
    --blue-dark: #3A7BD5;
    --blue-light: #6BA3ED;
    --blue-subtle: #EBF4FF;
    --blue-pale: #F5F9FF;

    /* Accent (blue-based, no pink/coral) */
    --coral: #4A8FE7;
    --coral-subtle: #EBF4FF;

    /* Neutrals */
    --charcoal: #2D3748;
    --charcoal-mid: #4A5568;
    --charcoal-light: #5A6A7E;
    --gray-100: #F7FAFC;
    --gray-200: #EDF2F7;
    --gray-300: #E2E8F0;
    --white: #FFFFFF;
    --border: #E2E8F0;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(74,143,231,0.08);
    --shadow-md: 0 4px 20px rgba(74,143,231,0.10);
    --shadow-lg: 0 8px 40px rgba(74,143,231,0.12);

    /* Motion */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition: all 0.3s var(--ease-out);
}

/* Base resets for hsh- scoped elements */
.hsh-menu-wrapper,
.hsh-footer-wrap {
    font-family: var(--font-body);
    color: var(--charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.hsh-menu-wrapper *,
.hsh-menu-wrapper *::before,
.hsh-menu-wrapper *::after,
.hsh-footer-wrap *,
.hsh-footer-wrap *::before,
.hsh-footer-wrap *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hsh-footer-wrap a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.hsh-footer-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
}