/* ==========================================================================
   Fivur Design System (Editorial)
   A premium, typography-driven connection experience
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Primary Colors - Deep Rose */
    --hh-primary: #CF6E78;
    --hh-primary-dark: #A34D57;
    --hh-primary-darker: #8B3F48;
    --hh-primary-light: #D98A92;
    --hh-primary-rgb: 207, 110, 120;
    --hh-primary-tint-soft: #F0DFE1;

    /* Secondary - Warm Slate */
    --hh-secondary: #7B8D9D;
    --hh-secondary-dark: #536573;
    --hh-secondary-light: #8FA0AE;
    --hh-secondary-rgb: 123, 141, 157;

    /* Accent & Functional */
    --hh-accent: #C9A55A;
    --hh-accent-rgb: 201, 165, 90;
    --hh-success: #5A9E7C;
    --hh-success-rgb: 90, 158, 124;
    --hh-warning: #C9A55A;
    --hh-warning-rgb: 201, 165, 90;
    --hh-danger: #CF6E78;
    --hh-danger-rgb: 207, 110, 120;
    --hh-security: #5E8AB4;
    --hh-security-rgb: 94, 138, 180;

    /* Backgrounds */
    --hh-dark: #161618;
    --hh-dark-surface: #1E1E21;
    --hh-dark-elevated: #27272B;

    /* Text Colors - Warm off-white */
    --hh-text-primary: #F0ECE8;
    --hh-text-secondary: rgba(240, 236, 232, 0.72);
    --hh-text-muted: rgba(240, 236, 232, 0.60);
    --hh-text-inverse: #FFFFFF;
    --hh-action-primary-bg: #A34D57;
    --hh-action-primary-bg-hover: #8B3F48;
    --hh-action-primary-fg: #FFFFFF;
    --hh-link-hover: #F0ECE8;
    --hh-link-hover-shadow: none;
    --hh-logo-text-shadow: none;

    /* Gradients → Solid */
    --hh-gradient-primary: var(--hh-primary);
    --hh-gradient-primary-hover: var(--hh-primary-light);
    --hh-gradient-subtle: rgba(196, 97, 108, 0.04);
    --hh-gradient-dark-bg: var(--hh-dark);

    /* Glass → Solid */
    --hh-glass-bg: var(--hh-dark-surface);
    --hh-glass-bg-hover: var(--hh-dark-elevated);
    --hh-glass-border: rgba(240, 236, 232, 0.06);
    --hh-glass-border-highlight: rgba(240, 236, 232, 0.10);
    --hh-glass-blur: none;

    /* Shared UI chrome */
    --hh-scrollbar-track: rgba(22, 22, 24, 0.4);
    --hh-scrollbar-thumb: rgba(240, 236, 232, 0.12);
    --hh-chrome-topbar-bg: rgba(22, 22, 24, 0.72);
    --hh-chrome-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --hh-chrome-mobile-nav-bg: rgba(22, 22, 24, 0.88);
    --hh-chrome-mobile-nav-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    --hh-chrome-nav-muted: rgba(240, 236, 232, 0.42);
    --hh-chrome-nav-secondary: rgba(240, 236, 232, 0.55);
    --hh-chrome-nav-hover: rgba(240, 236, 232, 0.85);
    --hh-chrome-nav-hover-bg: rgba(240, 236, 232, 0.06);
    --hh-chrome-nav-strip-bg: rgba(240, 236, 232, 0.02);

    /* Soft surfaces used across pages/components */
    --hh-surface-soft: rgba(240, 236, 232, 0.03);
    --hh-surface-soft-alt: rgba(240, 236, 232, 0.05);
    --hh-surface-soft-hover: rgba(240, 236, 232, 0.08);
    --hh-surface-elevated-strong: rgba(30, 30, 33, 0.85);

    /* Input tokens */
    --hh-input-bg: rgba(22, 22, 24, 0.6);
    --hh-input-bg-focus: rgba(22, 22, 24, 0.9);
    --hh-button-secondary-text: #F0ECE8;

    /* Decorative gradients → removed */
    --hh-gradient-animated-bg: var(--hh-dark);

    /* Shadows - Precision, not drama */
    --hh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --hh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    --hh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Glows → removed */
    --hh-glow-primary: none;
    --hh-glow-secondary: none;
    --hh-glow-accent: none;

    /* Spacing - More generous */
    --hh-spacing-xs: 0.25rem;
    --hh-spacing-sm: 0.5rem;
    --hh-spacing-md: 1rem;
    --hh-spacing-lg: 1.75rem;
    --hh-spacing-xl: 2.5rem;
    --hh-spacing-2xl: 4rem;

    /* Border Radius - Sharper */
    --hh-radius-sm: 4px;
    --hh-radius-md: 8px;
    --hh-radius-lg: 12px;
    --hh-radius-xl: 16px;
    --hh-radius-card: 12px;
    --hh-radius-full: 9999px;

    /* Transitions */
    --hh-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --hh-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --hh-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --hh-z-background: -1;
    --hh-z-card-stack: 1;
    --hh-z-card-overlay: 5;
    --hh-z-sticky: 10;
    --hh-z-topbar: 50;
    --hh-z-mobile-nav: 200;
    --hh-z-error: 500;
    --hh-z-modal: 1000;
    --hh-z-overlay: 2000;
    --hh-z-critical: 9999;

    /* Typography - Larger, tighter */
    --hh-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hh-font-size-xs: 0.75rem;
    --hh-font-size-sm: 0.8125rem;
    --hh-font-size-md: 0.9375rem;
    --hh-font-size-lg: 1.125rem;
    --hh-font-size-xl: 1.375rem;
    --hh-font-size-2xl: 1.75rem;
    --hh-font-size-3xl: 2.5rem;
    --hh-font-size-4xl: 3.5rem;

    /* MudBlazor palette bridge */
    --mud-palette-primary: var(--hh-primary) !important;
    --mud-palette-primary-rgb: var(--hh-primary-rgb) !important;
    --mud-palette-secondary: var(--hh-secondary) !important;
    --mud-palette-secondary-rgb: var(--hh-secondary-rgb) !important;
    --mud-palette-tertiary: var(--hh-accent) !important;
    --mud-palette-tertiary-rgb: var(--hh-accent-rgb) !important;
    --mud-palette-info: var(--hh-security) !important;
    --mud-palette-info-rgb: var(--hh-security-rgb) !important;
    --mud-palette-success: var(--hh-success) !important;
    --mud-palette-success-rgb: var(--hh-success-rgb) !important;
    --mud-palette-warning: var(--hh-warning) !important;
    --mud-palette-warning-rgb: var(--hh-warning-rgb) !important;
    --mud-palette-error: var(--hh-danger) !important;
    --mud-palette-error-rgb: var(--hh-danger-rgb) !important;
    --mud-palette-text-primary: var(--hh-text-primary) !important;
    --mud-palette-text-secondary: var(--hh-text-secondary) !important;
}

:root[data-hh-theme="paper"] {
    --hh-primary: #A34D57;
    --hh-primary-dark: #8B3F48;
    --hh-primary-light: #C4616C;
    --hh-primary-rgb: 163, 77, 87;
    --hh-primary-tint-soft: #F0DFE1;

    --hh-secondary: #536573;
    --hh-secondary-dark: #42525E;
    --hh-secondary-light: #6B7D8D;
    --hh-secondary-rgb: 83, 101, 115;

    --hh-accent: #7A6428;
    --hh-accent-rgb: 122, 100, 40;
    --hh-success: #3D7A5A;
    --hh-success-rgb: 61, 122, 90;
    --hh-warning: #7A6428;
    --hh-warning-rgb: 122, 100, 40;
    --hh-danger: #A34D57;
    --hh-danger-rgb: 163, 77, 87;
    --hh-security: #4A7099;
    --hh-security-rgb: 74, 112, 153;

    --hh-dark: #F7F5F2;
    --hh-dark-surface: #FFFFFF;
    --hh-dark-elevated: #EDEBE8;

    --hh-text-primary: #1C1A17;
    --hh-text-secondary: rgba(28, 26, 23, 0.72);
    --hh-text-muted: rgba(28, 26, 23, 0.65);
    --hh-text-inverse: #FFFFFF;
    --hh-action-primary-bg: #A34D57;
    --hh-action-primary-bg-hover: #8B3F48;
    --hh-action-primary-fg: #FFFFFF;
    --hh-link-hover: #8B3F48;
    --hh-link-hover-shadow: none;
    --hh-logo-text-shadow: none;

    --hh-gradient-primary: var(--hh-primary);
    --hh-gradient-primary-hover: var(--hh-primary-light);
    --hh-gradient-subtle: rgba(163, 77, 87, 0.04);
    --hh-gradient-dark-bg: var(--hh-dark);

    --hh-glass-bg: var(--hh-dark-surface);
    --hh-glass-bg-hover: var(--hh-dark-elevated);
    --hh-glass-border: rgba(28, 26, 23, 0.08);
    --hh-glass-border-highlight: rgba(28, 26, 23, 0.12);
    --hh-glass-blur: none;

    --hh-scrollbar-track: rgba(28, 26, 23, 0.04);
    --hh-scrollbar-thumb: rgba(28, 26, 23, 0.14);
    --hh-chrome-topbar-bg: rgba(255, 255, 255, 0.82);
    --hh-chrome-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --hh-chrome-mobile-nav-bg: rgba(255, 255, 255, 0.92);
    --hh-chrome-mobile-nav-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    --hh-chrome-nav-muted: rgba(28, 26, 23, 0.48);
    --hh-chrome-nav-secondary: rgba(28, 26, 23, 0.60);
    --hh-chrome-nav-hover: rgba(28, 26, 23, 0.85);
    --hh-chrome-nav-hover-bg: rgba(163, 77, 87, 0.06);
    --hh-chrome-nav-strip-bg: rgba(163, 77, 87, 0.03);
    --hh-surface-soft: rgba(163, 77, 87, 0.03);
    --hh-surface-soft-alt: rgba(163, 77, 87, 0.05);
    --hh-surface-soft-hover: rgba(163, 77, 87, 0.08);
    --hh-surface-elevated-strong: rgba(255, 255, 255, 0.94);
    --hh-input-bg: rgba(255, 255, 255, 0.88);
    --hh-input-bg-focus: rgba(255, 255, 255, 0.98);
    --hh-button-secondary-text: #1C1A17;
    --hh-gradient-animated-bg: var(--hh-dark);

    --hh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --hh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --hh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);

    --hh-glow-primary: none;
    --hh-glow-secondary: none;
    --hh-glow-accent: none;

    --mud-palette-primary: #A34D57 !important;
    --mud-palette-secondary: #536573 !important;
    --mud-palette-tertiary: #7A6428 !important;
    --mud-palette-background: #F7F5F2 !important;
    --mud-palette-surface: #FFFFFF !important;
    --mud-palette-appbar-background: #FFFFFF !important;
    --mud-palette-drawer-background: #FFFFFF !important;
    --mud-palette-text-primary: #1C1A17 !important;
    --mud-palette-text-secondary: rgba(28, 26, 23, 0.72) !important;
}

:root[data-hh-theme="fivur"] {
    /* Primary Colors - Teal (from logo left lobe) */
    --hh-primary: #11A09D;
    --hh-primary-dark: #0A8F8C;
    --hh-primary-darker: #056361;
    --hh-primary-light: #2AABA8;
    --hh-primary-rgb: 17, 160, 157;
    --hh-primary-tint-soft: #D4EFEE;

    /* Secondary - Coral (from logo right lobe) */
    --hh-secondary: #F07757;
    --hh-secondary-dark: #D45D3E;
    --hh-secondary-light: #F49478;
    --hh-secondary-rgb: 240, 119, 87;

    /* Accent & Functional */
    --hh-accent: #F0B957;
    --hh-accent-rgb: 240, 185, 87;
    --hh-success: #5A9E7C;
    --hh-success-rgb: 90, 158, 124;
    --hh-warning: #F0B957;
    --hh-warning-rgb: 240, 185, 87;
    --hh-danger: #E85D5D;
    --hh-danger-rgb: 232, 93, 93;
    --hh-security: #5E8AB4;
    --hh-security-rgb: 94, 138, 180;

    /* Backgrounds - Dark with warm undertone */
    --hh-dark: #141716;
    --hh-dark-surface: #1B1F1E;
    --hh-dark-elevated: #242928;

    /* Text Colors */
    --hh-text-primary: #EDF2F0;
    --hh-text-secondary: rgba(237, 242, 240, 0.72);
    --hh-text-muted: rgba(237, 242, 240, 0.60);
    --hh-text-inverse: #FFFFFF;
    --hh-action-primary-bg: #056361;
    --hh-action-primary-bg-hover: #044F4D;
    --hh-action-primary-fg: #FFFFFF;
    --hh-link-hover: #2AABA8;
    --hh-link-hover-shadow: none;
    --hh-logo-text-shadow: none;

    --hh-gradient-primary: var(--hh-primary);
    --hh-gradient-primary-hover: var(--hh-primary-light);
    --hh-gradient-subtle: rgba(10, 143, 140, 0.04);
    --hh-gradient-dark-bg: var(--hh-dark);

    --hh-glass-bg: var(--hh-dark-surface);
    --hh-glass-bg-hover: var(--hh-dark-elevated);
    --hh-glass-border: rgba(237, 242, 240, 0.06);
    --hh-glass-border-highlight: rgba(237, 242, 240, 0.10);
    --hh-glass-blur: none;

    --hh-scrollbar-track: rgba(20, 23, 22, 0.4);
    --hh-scrollbar-thumb: rgba(237, 242, 240, 0.12);
    --hh-chrome-topbar-bg: rgba(20, 23, 22, 0.72);
    --hh-chrome-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --hh-chrome-mobile-nav-bg: rgba(20, 23, 22, 0.88);
    --hh-chrome-mobile-nav-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    --hh-chrome-nav-muted: rgba(237, 242, 240, 0.42);
    --hh-chrome-nav-secondary: rgba(237, 242, 240, 0.55);
    --hh-chrome-nav-hover: rgba(237, 242, 240, 0.85);
    --hh-chrome-nav-hover-bg: rgba(10, 143, 140, 0.08);
    --hh-chrome-nav-strip-bg: rgba(10, 143, 140, 0.03);
    --hh-surface-soft: rgba(10, 143, 140, 0.04);
    --hh-surface-soft-alt: rgba(10, 143, 140, 0.06);
    --hh-surface-soft-hover: rgba(10, 143, 140, 0.10);
    --hh-surface-elevated-strong: rgba(27, 31, 30, 0.85);
    --hh-input-bg: rgba(20, 23, 22, 0.6);
    --hh-input-bg-focus: rgba(20, 23, 22, 0.9);
    --hh-button-secondary-text: #EDF2F0;
    --hh-gradient-animated-bg: var(--hh-dark);

    --hh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --hh-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
    --hh-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);

    --hh-glow-primary: none;
    --hh-glow-secondary: none;
    --hh-glow-accent: none;

    --mud-palette-primary: #0A8F8C !important;
    --mud-palette-secondary: #F07757 !important;
    --mud-palette-tertiary: #F0B957 !important;
    --mud-palette-background: #141716 !important;
    --mud-palette-surface: #1B1F1E !important;
    --mud-palette-appbar-background: #141716 !important;
    --mud-palette-drawer-background: #141716 !important;
    --mud-palette-text-primary: #EDF2F0 !important;
    --mud-palette-text-secondary: rgba(237, 242, 240, 0.72) !important;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* iOS WKWebView: disable native input styling so our CSS is respected */
input,
textarea,
select,
button {
    -webkit-appearance: none;
    appearance: none;
}

/* Keep browser affordances for plain native choice controls. MudBlazor inputs
   retain their component-managed appearance through their mud-* classes. */
input[type="checkbox"]:not([class*="mud-"]),
input[type="radio"]:not([class*="mud-"]),
select:not([class*="mud-"]) {
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--hh-primary);
}

/* Prevent iOS Safari auto-zoom on input focus */
input,
textarea,
select {
    font-size: max(16px, 1em);
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
}

body {
    margin: 0;
    font-family: var(--hh-font-family);
    font-size: var(--hh-font-size-md);
    line-height: 1.55;
    background: var(--hh-dark);
    color: var(--hh-text-primary);
    min-height: 100vh;
    overscroll-behavior: none;
    overflow-x: hidden;
}

:focus-visible {
    outline: 2px solid var(--hh-accent);
    outline-offset: 2px;
}

button,
a.btn-primary,
a.btn-secondary,
.btn-primary,
.btn-secondary {
    min-height: 44px;
    min-width: 44px;
}

/* --------------------------------------------------------------------------
   Typography - Editorial
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--hh-spacing-md);
    font-weight: 600;
    line-height: 1.15;
    color: var(--hh-text-primary);
    letter-spacing: -0.025em;
}

h1:focus-visible,
h2:focus-visible,
h3:focus-visible,
h4:focus-visible,
h5:focus-visible,
h6:focus-visible {
    outline: none;
}

h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

h3 {
    font-size: var(--hh-font-size-2xl);
}

h4 {
    font-size: var(--hh-font-size-xl);
}

/* Desktop typography scaling */
@media (min-width: 769px) {
    body {
        line-height: 1.65;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: var(--hh-font-size-3xl);
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: var(--hh-font-size-4xl);
    }
}

p {
    margin: 0 0 var(--hh-spacing-md);
    color: var(--hh-text-secondary);
}

a {
    color: var(--hh-accent);
    text-decoration: none;
    transition: color var(--hh-transition-fast);
}

a:hover {
    color: var(--hh-link-hover);
    text-shadow: var(--hh-link-hover-shadow);
}

.hh-content p a:not([class]),
.hh-content li a:not([class]),
.hh-content td a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

/* --------------------------------------------------------------------------
   Accessibility: Focus styles
   -------------------------------------------------------------------------- */
*:focus-visible {
    outline: 2px solid var(--hh-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip to content link - hidden until focused */
.hh-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--hh-primary-dark);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s;
}

.hh-skip-link:focus {
    top: 0;
}

/* ── Keyboard Hint ── */
.hh-keyboard-hint {
    text-align: center;
    padding: 0.25rem 0;
    color: var(--hh-text-muted);
    font-size: var(--hh-text-xs);
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show keyboard hints when parent is focused via keyboard */
.hh-discover:focus-within .hh-keyboard-hint,
.hh-discover:focus .hh-keyboard-hint {
    opacity: 1;
}

/* ── Enhanced Focus Indicators (WCAG 2.4.7) ── */
.hh-action-btn:focus-visible {
    outline: 3px solid var(--hh-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(var(--hh-primary-rgb), 0.2);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
    outline: 3px solid var(--hh-primary);
    outline-offset: 3px;
}

/* ── Screen Reader Only Utility ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── High Contrast Mode ── */
@media (forced-colors: active) {
    .hh-action-btn:focus-visible {
        outline: 3px solid CanvasText;
    }

    .hh-skip-link:focus {
        outline: 3px solid CanvasText;
    }
}

/* --------------------------------------------------------------------------
   Error boundary & 404 page
   -------------------------------------------------------------------------- */
.hh-error-boundary,
.hh-not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 4rem 2rem;
    min-height: 50vh;
}

.hh-error-boundary h2,
.hh-not-found h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hh-text-primary);
    margin: 0;
}

.hh-error-boundary p,
.hh-not-found p {
    color: var(--hh-text-secondary);
    max-width: 400px;
    margin: 0;
}