/* ============================================================
   WebhookVault — design-language tokens (Brain/WEBHOOKVAULT-
   DESIGN-LANGUAGE.md + PLATFORM-UI.md §2)

   Loaded AFTER site.css: overrides the legacy custom properties
   so every existing page adopts the new language, and defines
   the --wv-* vocabulary new components are written against.
   site.css is legacy — new rules go in app-shell.css, and
   site.css shrinks as screens are rebuilt.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
    /* Kit palette */
    --wv-ink: #040121;
    --wv-paper: #F7F7F7;
    --wv-surface: #FFFFFF;
    --wv-primary: #1A67FF;
    --wv-primary-hover: #0F55E0;
    /* Hairlines: black @ 10% (alpha form, sits on any surface) */
    --wv-hairline: rgba(0, 0, 0, .10);
    --wv-hairline-soft: rgba(0, 0, 0, .06);

    /* Developer dialect: dark payload pane on light chrome */
    --wv-pane: #0D1117;
    --wv-pane-ink: #E6EDF3;
    --wv-pane-muted: #8B949E;
    --wv-pane-hairline: rgba(255, 255, 255, .12);

    /* Semantic delivery colors — chip pairs (fg / soft bg), AA on light chrome */
    --wv-delivered: #1A7F37;
    --wv-delivered-soft: rgba(26, 127, 55, .10);
    --wv-pending: #9A6700;
    --wv-pending-soft: rgba(154, 103, 0, .10);
    --wv-errored: #C93C37;
    --wv-errored-soft: rgba(201, 60, 55, .10);
    --wv-deadletter: #8E1519;
    --wv-deadletter-soft: rgba(142, 21, 25, .12);
    --wv-notattempted: #57606A;
    --wv-notattempted-soft: rgba(87, 96, 106, .10);

    /* Type */
    --wv-font-display: 'Geist', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --wv-font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --wv-font-mono: 'Geist Mono', 'JetBrains Mono', Consolas, monospace;

    /* ---- Legacy token overrides: retheme existing pages ---- */
    --accent: var(--wv-primary);
    --accent-hover: var(--wv-primary-hover);
    --accent-subtle: rgba(26, 103, 255, .08);
    --accent-glow: none;
    --accent-glow-sm: none;
    --bg-root: var(--wv-paper);
    --bg-surface: var(--wv-surface);
    --bg-surface-raised: var(--wv-surface);
    --border: var(--wv-hairline);
    --border-subtle: var(--wv-hairline-soft);
    --text-primary: var(--wv-ink);
    --text-secondary: rgba(4, 1, 33, .62);
    --text-tertiary: rgba(4, 1, 33, .42);
    --font: var(--wv-font-body);
    --mono: var(--wv-font-mono);
    --radius: 8px;
    --radius-sm: 6px;
    --success: var(--wv-delivered);
    --success-subtle: var(--wv-delivered-soft);
    --warning: var(--wv-pending);
    --danger: var(--wv-errored);
    --danger-subtle: var(--wv-errored-soft);
    --nav-bg: var(--wv-surface);
    --nav-border: var(--wv-hairline);
    --code-bg: var(--wv-pane);
}

[data-theme="dark"] {
    /* Dark chrome keeps the pane family; hairlines flip to white alpha */
    --wv-paper: #0D1117;
    --wv-surface: #161B22;
    --wv-ink: #E6EDF3;
    --wv-hairline: rgba(255, 255, 255, .12);
    --wv-hairline-soft: rgba(255, 255, 255, .07);
    --wv-pane: #0D1117;

    --text-secondary: rgba(230, 237, 243, .64);
    --text-tertiary: rgba(230, 237, 243, .42);
    --accent-subtle: rgba(26, 103, 255, .16);
    --bg-inset: #0D1117;
    --input-bg: #0D1117;
    --nav-bg: rgba(22, 27, 34, .85);

    /* Delivery chips brighten to hold AA on dark ground */
    --wv-delivered: #3FB950;
    --wv-delivered-soft: rgba(63, 185, 80, .16);
    --wv-pending: #D29922;
    --wv-pending-soft: rgba(210, 153, 34, .16);
    --wv-errored: #F85149;
    --wv-errored-soft: rgba(248, 81, 73, .16);
    --wv-deadletter: #FF7B72;
    --wv-deadletter-soft: rgba(255, 123, 114, .18);
    --wv-notattempted: #8B949E;
    --wv-notattempted-soft: rgba(139, 148, 158, .16);
}

/* Headlines carry the display face (kit: Geist Medium, tight tracking) */
h1, h2, h3, h4 {
    font-family: var(--wv-font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
}