/*
 * Operator Design System — Design Tokens
 *
 * Central source of truth for the Operator visual language. Every color, font,
 * shadow, and timing value lives here as a CSS custom property. Page and
 * component rules in app.css reference these tokens — never hardcode hex.
 *
 * Palette derived from the Operator design handoff (OpPalette in
 * variation-operator.jsx). Extended status colors (purple, pink, teal) are
 * used per-page for Ring Groups, Billing, EMEA, etc.
 */

:root {
    /* ── Neutrals ────────────────────────────────────────────────────────── */
    --op-bg:            #f6f7f9;   /* page background */
    --op-surface:       #ffffff;   /* card / panel */
    --op-surfaceAlt:    #fbfbfc;   /* subtle alt (table header, empty state) */
    --op-ink:           #0a0c10;   /* primary text */
    --op-ink2:          #374151;   /* secondary text */
    --op-muted:         #6b7280;   /* tertiary text, mono meta */
    --op-mutedSoft:     #9ca3af;   /* disabled, placeholder */
    --op-hairline:      #e4e6ea;   /* primary border */
    --op-hairlineSoft:  #eef0f3;   /* table row dividers */

    /* ── Accent ──────────────────────────────────────────────────────────── */
    --op-accent:        #0597d4;   /* links, active nav, primary buttons */
    --op-accentDk:      #04709e;   /* hover / active on accent elements */
    --op-accentSoft:    rgba(5, 151, 212, 0.10); /* accent tint background */

    /* ── Status ──────────────────────────────────────────────────────────── */
    --op-success:       #15803d;   /* registered, healthy, available */
    --op-successSoft:   rgba(21, 128, 61, 0.10);
    --op-warning:       #b45309;   /* unsaved, pending, partial */
    --op-warningSoft:   rgba(180, 83, 9, 0.10);
    --op-error:         #b91c1c;   /* missed, talking, deny, expired */
    --op-errorSoft:     rgba(185, 28, 28, 0.10);

    /* ── Extended status ─────────────────────────────────────────────────── */
    --op-purple:        #7c3aed;   /* Ring Group, Eng, In-a-meeting */
    --op-purpleSoft:    rgba(124, 58, 237, 0.10);
    --op-pink:          #db2777;   /* Billing, Outbound contact */
    --op-pinkSoft:      rgba(219, 39, 119, 0.10);
    --op-teal:          #0891b2;   /* EMEA, Federation, Custom statuses */
    --op-tealSoft:      rgba(8, 145, 178, 0.10);

    /* ── Chrome (dark header + sidebar) ──────────────────────────────────── */
    --op-chrome:        #1a1d22;
    --op-chromeAlt:     #22262c;
    --op-chromeIcon:    #8b919a;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --op-sans:          'Poppins', 'Inter', sans-serif;
    --op-mono:          'Geist Mono', 'JetBrains Mono', monospace;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --op-shadow-float:  0 1px 0 rgba(0,0,0,0.02),
                        0 24px 60px -20px rgba(10,12,16,0.18),
                        0 8px 24px -8px rgba(10,12,16,0.10);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --op-transition:    150ms ease-in-out;
}