/**
 * Shared styles for Scout AI Search
 * Common CSS used across index.html and results.html
 * Supports light/dark mode via CSS custom properties
 */

/* --- CSS Custom Properties (Light Mode - Default) --- */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #fafaf9;
    --bg-tertiary: #f5f5f4;
    --bg-input: #ffffff;
    --bg-hover: #f5f5f4;
    --bg-overlay: rgba(0, 0, 0, 0.2);
    --bg-modal-overlay: rgba(0, 0, 0, 0.45);

    --text-primary: #1c1917;
    --text-secondary: #57534e;
    --text-tertiary: #78716c;
    --text-muted: #a8a29e;
    --text-placeholder: #a8a29e;

    --border-primary: #e7e5e4;
    --border-secondary: #f5f5f4;

    --btn-primary-bg: #1c1917;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #292524;
    --btn-secondary-bg: #f5f5f4;
    --btn-secondary-text: #57534e;
    --btn-secondary-hover: #e7e5e4;

    --shadow-custom: 0px 122px 34px 0px rgba(243,243,242,0.02),
                     0px 78px 31px 0px rgba(243,243,242,0.15),
                     0px 44px 26px 0px rgba(243,243,242,0.5),
                     0px 20px 20px 0px rgba(243,243,242,0.85),
                     0px 5px 11px 0px rgba(243,243,242,0.98);
    --shadow-focus-ring: 0 0 0 2px rgb(186 230 253);

    --toggle-bg-off: #e5e7eb;
    --toggle-bg-on: #0f172a;
    --toggle-dot: #ffffff;

    --dropdown-bg: #ffffff;
    --dropdown-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

    --prose-text: #374151;
    --error-text: #ef4444;
    --error-hover: #dc2626;
    --success-bg: #059669;
}

/* --- Dark Mode --- */
:root.dark {
    --bg-primary: #1c1917;
    --bg-secondary: #292524;
    --bg-tertiary: #44403c;
    --bg-input: #292524;
    --bg-hover: #44403c;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-modal-overlay: rgba(0, 0, 0, 0.65);

    --text-primary: #fafaf9;
    --text-secondary: #d6d3d1;
    --text-tertiary: #a8a29e;
    --text-muted: #78716c;
    --text-placeholder: #78716c;

    --border-primary: #44403c;
    --border-secondary: #292524;

    --btn-primary-bg: #fafaf9;
    --btn-primary-text: #1c1917;
    --btn-primary-hover: #e7e5e4;
    --btn-secondary-bg: #292524;
    --btn-secondary-text: #d6d3d1;
    --btn-secondary-hover: #44403c;

    --shadow-custom: 0px 5px 15px 0px rgba(0,0,0,0.3);
    --shadow-focus-ring: 0 0 0 2px rgb(56 189 248 / 0.4);

    --toggle-bg-off: #44403c;
    --toggle-bg-on: #fafaf9;
    --toggle-dot: #1c1917;

    --dropdown-bg: #292524;
    --dropdown-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);

    --prose-text: #d6d3d1;
    --error-text: #f87171;
    --error-hover: #ef4444;
    --success-bg: #059669;
}

/* Respect system preference when no manual choice */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg-primary: #1c1917;
        --bg-secondary: #292524;
        --bg-tertiary: #44403c;
        --bg-input: #292524;
        --bg-hover: #44403c;
        --bg-overlay: rgba(0, 0, 0, 0.5);
        --bg-modal-overlay: rgba(0, 0, 0, 0.65);

        --text-primary: #fafaf9;
        --text-secondary: #d6d3d1;
        --text-tertiary: #a8a29e;
        --text-muted: #78716c;
        --text-placeholder: #78716c;

        --border-primary: #44403c;
        --border-secondary: #292524;

        --btn-primary-bg: #fafaf9;
        --btn-primary-text: #1c1917;
        --btn-primary-hover: #e7e5e4;
        --btn-secondary-bg: #292524;
        --btn-secondary-text: #d6d3d1;
        --btn-secondary-hover: #44403c;

        --shadow-custom: 0px 5px 15px 0px rgba(0,0,0,0.3);
        --shadow-focus-ring: 0 0 0 2px rgb(56 189 248 / 0.4);

        --toggle-bg-off: #44403c;
        --toggle-bg-on: #fafaf9;
        --toggle-dot: #1c1917;

        --dropdown-bg: #292524;
        --dropdown-shadow: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);

        --prose-text: #d6d3d1;
        --error-text: #f87171;
        --error-hover: #ef4444;
        --success-bg: #059669;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Typography */
body {
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.brand-font {
    font-family: 'ES Rebond Grotesque TRIAL', 'IBM Plex Sans', sans-serif;
    font-weight: bold;
}

.title-font {
    font-family: 'IBM Plex Serif', serif;
}

/* Search Input Shadow */
.custom-shadow {
    box-shadow: var(--shadow-custom);
}

/* Input Focus Animation - 2px sky ring */
.search-input-focus:focus-within {
    transform: scale(1.01);
    box-shadow: var(--shadow-custom), var(--shadow-focus-ring);
    transition: transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Button Hover Animation - 1% scale only */
.button-hover-animation {
    transition: transform 150ms cubic-bezier(0.25, 1, 0.5, 1),
                background-color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button-hover-animation:hover {
    transform: scale(1.01);
}

.button-hover-animation:active {
    transform: scale(1);
    transition-duration: 150ms;
}

/* Button color transitions for different states */
.button-hover-animation.bg-stone-950:hover,
.button-hover-animation.btn-primary:hover {
    background-color: var(--btn-primary-hover);
}

.button-hover-animation.bg-stone-950:active,
.button-hover-animation.btn-primary:active {
    background-color: var(--btn-primary-bg);
}

.button-hover-animation.bg-stone-100:hover,
.button-hover-animation.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    color: var(--text-primary);
}

.button-hover-animation.bg-stone-100:active,
.button-hover-animation.btn-secondary:active {
    background-color: var(--btn-secondary-hover);
    color: var(--text-primary);
}

/* Dark mode aware utility classes */
.bg-themed { background-color: var(--bg-primary); }
.bg-themed-secondary { background-color: var(--bg-secondary); }
.bg-themed-tertiary { background-color: var(--bg-tertiary); }
.text-themed { color: var(--text-primary); }
.text-themed-secondary { color: var(--text-secondary); }
.text-themed-tertiary { color: var(--text-tertiary); }
.border-themed { border-color: var(--border-primary); }

/* Dark mode toggle button */
.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}
.dark-mode-toggle:hover {
    background-color: var(--bg-hover);
}