/* Pulse admin design tokens — cool neutrals, one accent, dense ops UI */
/* Fonts: loaded via <link> in favicon_links.php (avoid @import FOUC) */

:root {
    color-scheme: light;
    /* Surfaces — cool gray family */
    --bg-primary: #f4f5f7;
    --bg-secondary: #ffffff;
    --bg-accent: #e8eefc;
    --bg-elevated: #ffffff;
    --text-primary: #1a1d24;
    --text-secondary: #5c6573;
    --text-muted: #8b93a1;
    --text-on-inverted: #ffffff;
    --border-color: #d8dde6;
    --border-color-light: #e8ecf2;
    --hover-color: #eef1f6;
    --row-alt: #eef1f6;

    /* Single accent (desaturated blue) */
    --accent-color: #2f5bea;
    --accent-color-hover: #2448c9;
    --accent-color-light: #6b8ef3;
    --btn-primary-hover: #2448c9;
    --accent-dim: rgba(47, 91, 234, 0.12);
    --focus-ring: rgba(47, 91, 234, 0.28);
    --accent-ring: rgba(47, 91, 234, 0.22);

    /* Semantic status — not competing accents */
    --success-color: #1f9d57;
    --danger-color: #d64545;
    --warning-color: #d97706;
    --success-dim: rgba(31, 157, 87, 0.14);
    --success-ring: rgba(31, 157, 87, 0.22);
    --danger-dim: rgba(214, 69, 69, 0.14);
    --danger-ring: rgba(214, 69, 69, 0.22);
    --warning-dim: rgba(217, 119, 6, 0.14);
    --warning-ring: rgba(217, 119, 6, 0.22);
    --border-success: #1f9d57;
    --border-warning: #d97706;
    --border-danger: #d64545;
    --status-excellent: #187a44;
    --status-good: #1f9d57;
    --status-ok: #5ba86b;
    --status-info: #2a8a9e;

    /* Special / retry highlight (was competing purple accent) */
    --accent-purple: #6b4fc7;
    --accent-purple-dim: rgba(107, 79, 199, 0.22);

    /* Domain badges (SERP etc.) — keep distinct but quieter */
    --badge-video: #a08a12;
    --badge-paid: #c7771a;
    --badge-images: #7a4fa0;
    --badge-snippet: #2f6fb5;
    --badge-reviews: #3d9a5a;
    --badge-images-dim: rgba(122, 79, 160, 0.08);
    --success-dim-soft: rgba(31, 157, 87, 0.06);
    --warning-dim-soft: rgba(217, 119, 6, 0.07);

    /* SERP chrome */
    --serp-link: #1a4fcc;
    --serp-url: #1a6b3c;
    --serp-description: #5c6573;
    --serp-link-dark: #8ab4f8;
    --serp-url-dark: #34a853;
    --source-google: #4285f4;
    --source-bing: #00809d;
    --source-unknown: #6b7280;

    /* Overlays / shadows (cool-tinted, not pure black) */
    --overlay-light: rgba(26, 29, 36, 0.06);
    --overlay-medium: rgba(26, 29, 36, 0.14);
    --overlay-dark: rgba(26, 29, 36, 0.45);
    --overlay-mid: rgba(26, 29, 36, 0.55);
    --overlay-darker: rgba(26, 29, 36, 0.72);
    --overlay-hex-light: #1a1d247a;
    --overlay-hex-dark: #5c65737a;
    --overlay-soft: rgba(26, 29, 36, 0.38);
    --shadow-sm: 0 1px 2px rgba(26, 29, 36, 0.06);
    --shadow-md: 0 4px 14px rgba(26, 29, 36, 0.1);
    --shadow-lg: 0 12px 32px rgba(26, 29, 36, 0.14);

    /* Type */
    --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --leading-tight: 1.25;
    --leading-normal: 1.45;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Control height */
    --control-h: 36px;

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-dialog: 1000;
    --z-toast: 10150;

    /* Legacy aliases used across modules */
    --card-bg: var(--bg-secondary);
    --primary-color: var(--accent-color);
    --disabled-bg: rgba(26, 29, 36, 0.08);
    --code-bg: #eef1f6;
    --code-bg-alt: #e4e8f0;
    --hover-bg: var(--hover-color);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg-primary: #0f1115;
    --bg-secondary: #171a21;
    --bg-accent: #222833;
    --bg-elevated: #1c212b;
    --text-primary: #e6e8ee;
    --text-secondary: #9aa3b2;
    --text-muted: #6f7887;
    --border-color: #2e3542;
    --border-color-light: #262c38;
    --hover-color: #222833;
    --row-alt: #1c212b;
    --accent-color: #6b8ef3;
    --accent-color-hover: #8aa4f6;
    --accent-color-light: #9db3f8;
    --btn-primary-hover: #8aa4f6;
    --accent-dim: rgba(107, 142, 243, 0.18);
    --focus-ring: rgba(107, 142, 243, 0.35);
    --accent-ring: rgba(107, 142, 243, 0.28);
    --accent-purple: #9b84e0;
    --accent-purple-dim: rgba(155, 132, 224, 0.34);
    --badge-images-dim: rgba(122, 79, 160, 0.18);
    --overlay-light: rgba(0, 0, 0, 0.2);
    --overlay-medium: rgba(0, 0, 0, 0.35);
    --overlay-dark: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.5);
    --code-bg: #222833;
    --code-bg-alt: #2a3140;
    --card-bg: var(--bg-secondary);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    font-weight: 400;
    margin: 0;
    padding: var(--space-5);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Theme transitions only after first paint (avoids light/dark blink) */
html.theme-animated body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Global focus — modules that set outline:none still get a visible ring */
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

code,
pre,
.mono,
.json-view {
    font-family: var(--font-mono);
}