/**
 * CafeHop public site — brand tokens (do not change hex values without client approval).
 */
:root {
    --ch-primary: #4A2C2A;
    --ch-secondary: #E47225;
    --ch-secondary-hover: #c9611a;
    --ch-accent: #8B4513;
    --ch-light: #F5E9DE;
    --ch-dark: #2C1810;

    --bs-primary: var(--ch-secondary);
    --bs-primary-rgb: 228, 114, 37;

    --ch-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --ch-font-body: 'Inter', system-ui, sans-serif;

    --ch-section-y: 5rem;
    --ch-section-y-lg: 6.25rem;
    --ch-container-max: 1140px;
    --ch-container-px: 1rem;

    /* Branch header banner (website) — matches upload/crop target */
    --ch-branch-header-width: 1104;
    --ch-branch-header-height: 400;
    --ch-branch-header-aspect: 1104 / 400;

    --ch-radius: 0.75rem;
    --ch-radius-lg: 1rem;
    --ch-radius-pill: 50rem;

    --ch-shadow-sm: 0 2px 8px rgba(44, 24, 16, 0.06);
    --ch-shadow-md: 0 8px 24px rgba(44, 24, 16, 0.1);
    --ch-nav-bg: #341100;
    --ch-nav-text: #F4EDE7;
    --ch-nav-border: rgba(244, 237, 231, 0.15);
    --ch-brand-logo-height: 7.5rem;
    --ch-brand-logo-max-width: 20rem;

    /* Legacy aliases used during migration from inline layout CSS */
    --primary: var(--ch-primary);
    --secondary: var(--ch-secondary);
    --secondary-hover: var(--ch-secondary-hover);
    --accent: var(--ch-accent);
    --light: var(--ch-light);
    --dark: var(--ch-dark);
}

[data-bs-theme="light"] {
    --body-color: var(--ch-dark);
    --heading-color: var(--ch-dark);
    --ch-surface: #ffffff;
    --ch-surface-muted: #faf8f6;
}

[data-bs-theme="dark"] {
    --body-color: #e9ecef;
    --heading-color: #ffffff;
    --navbar-bg: #212529;
    --nav-link-color: #e9ecef;
    --ch-surface: #212529;
    --ch-surface-muted: #2b3035;
}

[dir="rtl"] {
    direction: rtl;
}