/*
 * Canonical HOHO visual foundations shared by Blazor web and MAUI Blazor Hybrid.
 * Keep host layout and component-specific styling in their owning stylesheets.
 * Responsive rules currently use explicit 639px, 900px, and host-specific media queries.
 */
:root {
    /* Brand colors preserve the established HOHO Test implementation palette. */
    --hoho-brand-navy: #163b63;
    --hoho-brand-orange: #f15b2a;
    --hoho-brand-green: #27a844;
    --hoho-brand-gold: #d7ba7d;
    --hoho-brand-black: #000000;

    /* Semantic colors pair purpose with a safe default foreground. */
    --hoho-surface-canvas: #f5f6fa;
    --hoho-surface: #ffffff;
    --hoho-surface-elevated: #ffffff;
    --hoho-surface-inverse: var(--hoho-brand-black);
    --hoho-text-primary: #172033;
    --hoho-text-secondary: #526078;
    --hoho-text-inverse: #f5f6fa;
    --hoho-border: #ccd3df;
    --hoho-border-strong: var(--hoho-brand-navy);
    --hoho-action: #2854a6;
    --hoho-action-hover: var(--hoho-brand-navy);
    --hoho-focus: #006bb7;
    --hoho-info: #2854a6;
    --hoho-on-info: #ffffff;
    --hoho-success: #237a36;
    --hoho-on-success: #ffffff;
    --hoho-warning: #8a5700;
    --hoho-on-warning: #ffffff;
    --hoho-danger: #b32121;
    --hoho-on-danger: #ffffff;
    --hoho-surface-info: #e7eefc;
    --hoho-surface-success: #e7f4ea;
    --hoho-surface-warning: #fff1d6;
    --hoho-surface-danger: #fbe8e8;

    /* Typography: proportional UI text with selective monospace personality. */
    --hoho-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --hoho-font-brand: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --hoho-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --hoho-text-xs: .8rem;
    --hoho-text-sm: .875rem;
    --hoho-text-md: 1rem;
    --hoho-text-lg: 1.25rem;
    --hoho-text-xl: 1.75rem;
    --hoho-weight-regular: 400;
    --hoho-weight-medium: 500;
    --hoho-weight-bold: 700;
    --hoho-line-compact: 1.2;
    --hoho-line-body: 1.5;

    /* Four-pixel spacing scale retained from the shared UI implementation. */
    --hoho-space-1: .25rem;
    --hoho-space-2: .5rem;
    --hoho-space-3: .75rem;
    --hoho-space-4: 1rem;
    --hoho-space-6: 1.5rem;
    --hoho-space-8: 2rem;

    --hoho-border-width: 1px;
    --hoho-border-width-strong: 4px;
    --hoho-border-style-framed: double;
    --hoho-radius-sm: .45rem;
    --hoho-radius-md: .5rem;
    --hoho-radius-lg: .8rem;
    --hoho-radius-pill: 999px;
    --hoho-focus-width: 3px;
    --hoho-focus-offset: 2px;
    --hoho-target-min: 44px;

    --hoho-motion-fast: 120ms;
    --hoho-motion-standard: 200ms;
    --hoho-ease-standard: ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --hoho-motion-fast: .01ms;
        --hoho-motion-standard: .01ms;
    }
}