/*
 * WeProxy design tokens — single source of truth.
 * Load before weproxy-overlays / weproxy-client / weproxy-public.
 * Prefer these vars in new rules; migrate hardcoded hex gradually.
 */

:root {
    /* Surfaces — soft mono (less stark white) */
    --wp-bg: #ebebec;
    --wp-surface: #f4f4f5;
    --wp-surface-subtle: #ececed;
    --wp-surface-muted: #e4e4e7;

    /* Ink / text */
    --wp-ink: #111111;
    --wp-ink-strong: #09090b;
    --wp-ink-soft: #18181b;
    --wp-ink-inverse: #fafafa;
    --wp-body: #3f3f46;
    --wp-muted: #71717a;
    --wp-muted-soft: #52525b;
    --wp-muted-faint: #a1a1aa;

    /* Borders */
    --wp-line: #d4d4d8;
    --wp-line-strong: #c4c4c8;
    --wp-line-soft: #e4e4e7;

    /* Status */
    --wp-success: #15803d;
    --wp-success-bright: #22c55e;
    --wp-danger: #b91c1c;
    --wp-danger-ink: #7f1d1d;
    --wp-danger-bg: #fef2f2;
    --wp-danger-line: #fecaca;
    --wp-danger-icon: #dc2626;
    --wp-danger-mark: #ef4444;
    --wp-warning: #a16207;

    /* Dark chrome (sidebar / auth panels) */
    --wp-chrome: #0a0a0a;
    --wp-chrome-line: #27272a;
    --wp-chrome-text: #d4d4d8;
    --wp-chrome-hover: #27272a;

    /* Layout */
    --wp-sidebar: 292px;
    --wp-header-height: 82px;
    --wp-footer-band: 88px;

    /* Radii */
    --wp-radius: 10px;
    --wp-radius-sm: 7px;
    --wp-radius-xs: 6px;
    --wp-radius-md: 8px;
    --wp-radius-lg: 12px;
    --wp-radius-pill: 999px;

    /* Shadows */
    --wp-shadow: 0 16px 45px rgba(15, 23, 42, .045);
    --wp-shadow-modal: 0 24px 60px rgba(15, 23, 42, .16);
    --wp-shadow-toast: 0 10px 30px rgba(15, 23, 42, .12);
    --wp-shadow-cookie: 0 18px 50px rgba(15, 23, 42, .14);
    --wp-focus-ring: 0 0 0 3px rgba(24, 24, 27, .08);

    /* Controls — forms */
    --wp-control-radius: var(--wp-radius-sm);
    --wp-control-pad-y: 10px;
    --wp-control-pad-x: 14px;
    --wp-control-border: var(--wp-line-strong);
    --wp-control-border-focus: var(--wp-muted);
    --wp-control-bg: var(--wp-surface);
    --wp-control-color: var(--wp-ink);
    --wp-control-min-h: 42px;

    /* Controls — primary button */
    --wp-btn-radius: var(--wp-radius-sm);
    --wp-btn-pad: 9px 13px;
    --wp-btn-pad-lg: 0 18px;
    --wp-btn-font: 12px;
    --wp-btn-font-lg: 13px;
    --wp-btn-min-h: 42px;
    --wp-btn-bg: var(--wp-ink);
    --wp-btn-bg-strong: var(--wp-ink-strong);
    --wp-btn-bg-hover: var(--wp-chrome-hover);
    --wp-btn-color: var(--wp-ink-inverse);
    --wp-btn-border: var(--wp-ink);

    /* Controls — secondary / cancel */
    --wp-btn-secondary-bg: var(--wp-surface);
    --wp-btn-secondary-color: var(--wp-ink);
    --wp-btn-secondary-border: var(--wp-line-strong);
    --wp-btn-secondary-hover-bg: var(--wp-surface-muted);

    /* Overlay / modal shell */
    --wp-modal-radius: var(--wp-radius-lg);
    --wp-modal-pad: 28px 24px 22px;
    --wp-modal-border: var(--wp-line);
    --wp-modal-title-size: 20px;
    --wp-modal-close-size: 36px;
    --wp-toast-radius: var(--wp-radius);
    --wp-toast-close-size: 28px;

    /* Motion */
    --wp-ease: .18s ease;
    --wp-ease-fast: .15s ease;

    /* Typography */
    --wp-font: "Geist Sans", Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Legacy aliases (older rules / public.css) */
    --wp-black: var(--wp-ink-strong);
}