/* Global design tokens — single source of truth for color/spacing/shape across all pages.
   Load this <link> first, before any page-specific CSS, on every page.
   Palette: Indigo Slate. Typography: Public Sans (UI) + IBM Plex Mono (IDs/dates/numbers). */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    /* Typography */
    --font-sans: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Brand / accent */
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --success: #16A34A;
    --danger: #DC2626;
    --warning: #D97706;

    /* Light theme (default) — Indigo Slate */
    --bg-body: #ECEEF2;          /* page — app background behind cards */
    --bg-card: #FFFFFF;          /* surface — cards, table, popovers */
    --surface-alt: #F6F7F9;      /* inputs, docs badge, hover fills, zebra */
    --table-header-bg: #F9FAFB;  /* sticky table header */
    --bg-header: rgba(255, 255, 255, 0.95);
    --bg-hover: #F4F5F7;
    --text-primary: #181B21;     /* primary text */
    --text-secondary: #5A6472;   /* secondary text, company names (muted) */
    --text-muted: #98A1AF;       /* hashes, timestamps, placeholders (faint) */
    --header-text: #697280;      /* column + field labels */
    --border-color: #E5E8EC;     /* hairlines, row dividers */
    --border-strong: #D4D9E0;    /* header divider, scrollbar */
    --row-hover: rgba(79, 70, 229, 0.045);
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10);
    --header-height: 70px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-badge: 6px;

    /* Accent tints (indigo) — for chips, active fills, focus rings */
    --primary-soft: color-mix(in srgb, var(--primary) 11%, var(--bg-card));
    --primary-soft-text: color-mix(in srgb, var(--primary) 72%, var(--text-primary));
    --primary-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);

    /* Status badges (light) — soft-filled pill + dot */
    --status-approved-bg: #E6F6EC;  --status-approved-fg: #12783C;  --status-approved-dot: #16A34A;
    --status-pending-bg: #FDF3E2;   --status-pending-fg: #9A5808;   --status-pending-dot: #D97706;
    --status-processing-bg: #E9F0FE; --status-processing-fg: #1D4ED8; --status-processing-dot: #2563EB;
    --status-rejected-bg: #FDEAEA;  --status-rejected-fg: #B42318;  --status-rejected-dot: #DC2626;
    --status-neutral-bg: #EEF0F3;   --status-neutral-fg: #5A6472;   --status-neutral-dot: #98A1AF;

    /* Retired page-local aliases, folded in so nothing has to be renamed */
    --primary-blue: var(--primary);
    --primary-blue-hover: var(--primary-hover);
    --secondary-gray: #5A6472;
    --secondary-gray-hover: #434B57;

    /* Spacing scale (additive — used by components.css) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

[data-theme="dark"] {
    /* Brand accent lifts to a brighter indigo for contrast on dark surfaces */
    --primary: #7C83FF;
    --primary-hover: #9599FF;
    --success: #22C55E;
    --danger: #EF4444;
    --warning: #F59E0B;

    --bg-body: #0B0D11;
    --bg-card: #14171D;
    --bg-card-2: #1B1F27;
    --surface-alt: #1B1F27;
    --table-header-bg: #1B1F27;
    --bg-header: rgba(20, 23, 29, 0.95);
    --bg-hover: #1E222B;
    --text-primary: #E9EBEF;
    --text-secondary: #9AA2B1;
    --text-muted: #646C7A;
    --header-text: #8B93A3;
    --border-color: #272C37;
    --border-strong: #39414F;
    --row-hover: rgba(124, 131, 255, 0.07);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.55);
    --secondary-gray: #9AA2B1;
    --secondary-gray-hover: #B5BCC8;

    /* Status badges (dark) */
    --status-approved-bg: #12251A;  --status-approved-fg: #5CD98A;  --status-approved-dot: #22C55E;
    --status-pending-bg: #2A2010;   --status-pending-fg: #F5B544;   --status-pending-dot: #F59E0B;
    --status-processing-bg: #111F33; --status-processing-fg: #6AA6FB; --status-processing-dot: #3B82F6;
    --status-rejected-bg: #2A1517;  --status-rejected-fg: #F87B7B;  --status-rejected-dot: #EF4444;
    --status-neutral-bg: #1B1F27;   --status-neutral-fg: #9AA2B1;   --status-neutral-dot: #646C7A;
}

/* Global typography */
body {
    font-family: var(--font-sans);
}

/* Only animate theme transitions after the initial paint (prevents FOUC flicker) */
body.theme-ready {
    transition: background 0.3s ease, color 0.3s ease;
}

/* Thin, rounded, theme-tinted scrollbars — applied globally (guidelines §6). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
    border: 3px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}