/* =====================================================================
   lynx-socket 管理后台 — 设计令牌（Binance-anchored dark theme）
   ===================================================================== */

:root {
    /* ===== Brand & Accent (Binance Yellow) ===== */
    --color-primary:        #FCD535;   /* Binance Yellow — main CTA, accents */
    --color-primary-hover:  #F0B90B;   /* active / pressed */
    --color-primary-soft:   rgba(252, 213, 53, 0.12);
    --color-primary-faint:  rgba(252, 213, 53, 0.06);
    --color-on-primary:     #181A20;   /* black on yellow */

    /* ===== Surfaces (dark canvas) ===== */
    --color-canvas:         #0B0E11;   /* page floor — near-black */
    --color-surface:        #1E2329;   /* cards */
    --color-surface-2:      #2B3139;   /* nested / hover */
    --color-surface-3:      #363C45;   /* deepest elevation */
    --color-surface-hover:  #262B32;

    /* ===== Text ===== */
    --color-ink:            #181A20;   /* strong text on light surfaces */
    --color-body:           #EAECEF;   /* default running text on dark */
    --color-on-dark:        #FFFFFF;   /* highest contrast on dark */
    --color-muted:          #707A8A;   /* captions, breadcrumbs */
    --color-muted-strong:   #929AA5;

    /* ===== Borders / Hairlines ===== */
    --color-hairline:       #2B3139;   /* 1px border on dark */
    --color-hairline-light: #EAECEF;   /* on light surfaces */
    --color-border-strong:  #CDD1D6;

    /* ===== Trading semantics ===== */
    --color-up:             #0ECB81;   /* success / price-up */
    --color-up-soft:        rgba(14, 203, 129, 0.12);
    --color-down:           #F6465D;   /* danger / price-down */
    --color-down-soft:      rgba(246, 70, 93, 0.12);
    --color-warning:        #F0B90B;   /* warning uses primary-active */
    --color-warning-soft:   rgba(240, 185, 11, 0.12);
    --color-info:           #3B82F6;   /* info blue */
    --color-info-soft:      rgba(59, 130, 246, 0.12);

    /* ===== Type ===== */
    --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-number:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Type roles (used by class helpers) */
    --t-hero:      64px;
    --t-display-lg:48px;
    --t-display-md:40px;
    --t-display-sm:32px;
    --t-title-lg:  24px;
    --t-title-md:  20px;
    --t-title-sm:  16px;
    --t-body-md:   14px;
    --t-body-sm:   13px;
    --t-caption:   12px;
    --t-button:    14px;
    --t-nav:       14px;
    --t-num-lg:    32px;
    --t-num-md:    16px;
    --t-num-sm:    14px;

    /* ===== Radius ===== */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-pill: 9999px;

    /* ===== Spacing (4-multiple) ===== */
    --space-xxs:   4px;
    --space-xs:    8px;
    --space-sm:    12px;
    --space-md:    16px;
    --space-lg:    24px;
    --space-xl:    32px;
    --space-xxl:   48px;
    --space-section: 80px;

    /* ===== Elevation (very subtle, no glow) ===== */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.5);
    --ring-focus:  0 0 0 3px rgba(252, 213, 53, 0.28);

    /* ===== Layout ===== */
    --header-height:   64px;
    --sidebar-width:   232px;
    --content-max:     1440px;
}

/* =====================================================================
   Reset
   ===================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 14px; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--color-canvas);
    color: var(--color-body);
    line-height: 1.5;
    font-size: var(--t-body-md);
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

code, .col-mono {
    font-family: var(--font-number);
    font-feature-settings: "tnum" 1, "zero" 1;
    font-size: 0.92em;
    color: var(--color-muted-strong);
}

::selection { background: var(--color-primary); color: var(--color-on-primary); }

/* Subtle global scrollbar (dark surfaces) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-canvas); }
::-webkit-scrollbar-thumb {
    background: var(--color-surface-2);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-canvas);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-surface-3); }

/* Numeric helpers — used by JS-injected data-* cells */
.num { font-family: var(--font-number); font-variant-numeric: tabular-nums; }
.num-lg { font-family: var(--font-number); font-size: var(--t-num-lg); font-weight: 700; letter-spacing: -0.3px; }
.num-md { font-family: var(--font-number); font-size: var(--t-num-md); font-weight: 500; }
.num-sm { font-family: var(--font-number); font-size: var(--t-num-sm); font-weight: 500; }
.up   { color: var(--color-up); }
.down { color: var(--color-down); }
.muted { color: var(--color-muted); }
.mono  { font-family: var(--font-number); }