/* =========================================================
   新亿诚运营后台 · Design Tokens (v2)
   Aesthetic: Bone + Ink + Persimmon
   ========================================================= */

/* Self-hosted Space Grotesk + JetBrains Mono (downloaded 2026-05-22, ~111KB total).
   No external CDN — works offline + no Google Fonts allowlist needed in CSP. */
@import url('/kf/admin/assets/fonts/fonts.css');

:root {
    /* ---- Palette ---- */
    --bone:        #F6F3EC;   /* page bg, warm cream */
    --bone-2:      #EFEBE0;   /* hover/subtle */
    --paper:       #FFFFFF;
    --paper-2:     #FAF7F0;   /* slightly tinted card inset */
    --hairline:    #E5DFD0;   /* warm hairline */
    --hairline-2:  #EFEAD9;
    --ink:         #14162A;   /* sidebar, headings */
    --ink-2:       #1F2238;   /* sidebar hover */
    --ink-3:       #2B2E48;
    --slate:       #4D5066;   /* body text on light */
    --slate-2:     #6B6E84;   /* secondary text */
    --mute:        #97999E;   /* tertiary / placeholders */

    /* ---- Accent (configurable via Tweaks) ---- */
    --accent:      #FF6A3D;   /* persimmon */
    --accent-ink:  #C9461E;   /* darker for text on light */
    --accent-soft: #FFE6D9;   /* tinted bg */
    --accent-fg:   #FFFFFF;   /* text on accent */

    /* ---- Semantic ---- */
    --moss:        #2A6F4A;
    --moss-soft:   #E1F0E5;
    --cobalt:      #2B5BE8;
    --cobalt-soft: #E2EAFD;
    --coral:       #D93A4A;
    --coral-soft:  #FBE2E5;
    --amber:       #B98314;
    --amber-soft:  #FBEBC8;
    --plum:        #6A3FB1;
    --plum-soft:   #ECE3FA;

    /* ---- Type ---- */
    --f-display: "Space Grotesk","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
    --f-sans:    "Space Grotesk","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
    --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* ---- Spacing (8pt-ish) ---- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
    --s-9: 56px;

    /* ---- Radii ---- */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-4: 16px;
    --r-pill: 999px;

    /* ---- Shadow ---- */
    --sh-1: 0 1px 0 rgba(20,22,42,.04);
    --sh-2: 0 2px 8px -2px rgba(20,22,42,.06), 0 1px 0 rgba(20,22,42,.04);
    --sh-3: 0 8px 28px -10px rgba(20,22,42,.18), 0 1px 0 rgba(20,22,42,.04);
    --sh-pop: 0 20px 60px -18px rgba(20,22,42,.28);

    /* ---- Layout ---- */
    --sidebar-w: 232px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --row-h: 36px;
}

/* ---- Legacy var aliases (only kept while 客服 index.html still uses style.css' kf-* classes) ---- */
:root {
    --c-bg:        var(--bone);
    --c-card:      var(--paper);
    --c-ink:       var(--ink);
    --c-ink-soft:  var(--slate);
    --c-muted:     var(--slate-2);
    --c-line:      var(--hairline);
    --c-primary:   var(--accent);
    --c-accent:    var(--accent);
    --c-deep:      var(--ink);
    --shadow:      var(--sh-2);
    --radius:      var(--r-3);
}

/* ---- Density variants ---- */
body[data-density="compact"] {
    --s-3: 8px;  --s-4: 12px;  --s-5: 16px;  --s-6: 18px;  --s-7: 24px;
    --row-h: 32px;
}
body[data-density="cozy"] {
    --s-3: 14px; --s-4: 20px;  --s-5: 24px;  --s-6: 30px;  --s-7: 40px;
    --row-h: 42px;
}

/* ---- Dark mode (Tweaks toggle) ---- */
body[data-theme="dark"] {
    --bone:      #0E0F1A;
    --bone-2:    #16182C;
    --paper:     #181A2E;
    --paper-2:   #1F2240;
    --hairline:  #262943;
    --hairline-2:#1F2238;
    --ink:       #0A0B17;
    --ink-2:     #16182C;
    --slate:     #C8CAD6;
    --slate-2:   #888B9F;
    --mute:      #5C5F73;
    --accent-soft:#3A1D11;
    --moss-soft: #15321F;
    --cobalt-soft:#152343;
    --coral-soft:#3A1B1E;
    --amber-soft:#3A2B0F;
    --plum-soft: #2B1B45;
    --sh-1: 0 1px 0 rgba(0,0,0,.3);
    --sh-2: 0 4px 14px -4px rgba(0,0,0,.4);
    --sh-3: 0 14px 32px -14px rgba(0,0,0,.55);
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
    font-family: var(--f-sans);
    color: var(--slate);
    background: var(--bone);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","ss02","cv11";
}

button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Generic primitives ---- */
.t-display { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.t-eyebrow { font-size: 11px; font-weight: 600; color: var(--slate-2); letter-spacing: .12em; text-transform: uppercase; }
.t-mono    { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.card {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-3);
    box-shadow: var(--sh-1);
}

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 14px;
    border-radius: var(--r-2);
    font-size: 13px; font-weight: 600;
    border: 1px solid transparent;
    transition: background .14s, border-color .14s, transform .12s, color .14s;
    font-family: inherit;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--ink-2); }
.btn--accent  { background: var(--accent); color: var(--accent-fg); }
.btn--accent:hover { filter: brightness(1.05); }
.btn--ghost   { background: var(--paper); color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--bone-2); border-color: #D5CFBE; }
.btn--quiet   { background: transparent; color: var(--slate); }
.btn--quiet:hover { background: var(--bone-2); color: var(--ink); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.btn--ic { width: 34px; padding: 0; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 10px;
    border-radius: var(--r-pill);
    background: var(--bone-2);
    color: var(--slate);
    font-size: 12px; font-weight: 500;
    border: 1px solid transparent;
}
.chip--ink     { background: var(--ink); color: #fff; }
.chip--accent  { background: var(--accent-soft); color: var(--accent-ink); }
.chip--moss    { background: var(--moss-soft); color: var(--moss); }
.chip--cobalt  { background: var(--cobalt-soft); color: var(--cobalt); }
.chip--coral   { background: var(--coral-soft); color: var(--coral); }
.chip--amber   { background: var(--amber-soft); color: var(--amber); }
.chip--plum    { background: var(--plum-soft); color: var(--plum); }
.chip--outline { background: var(--paper); border-color: var(--hairline); color: var(--slate); }

/* Input */
.field {
    height: 36px; padding: 0 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-2);
    background: var(--paper);
    color: var(--ink);
    font-size: 13.5px;
    outline: none;
    transition: border-color .14s, box-shadow .14s;
}
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(20,22,42,.08); }

/* Dot indicator */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot--ok  { background: var(--moss); box-shadow: 0 0 0 3px rgba(42,111,74,.18); }
.dot--warn{ background: var(--amber); box-shadow: 0 0 0 3px rgba(185,131,20,.18); }
.dot--err { background: var(--coral); box-shadow: 0 0 0 3px rgba(217,58,74,.18); }
.dot--mute{ background: var(--mute); }

/* Util */
.hstack { display: inline-flex; align-items: center; gap: var(--s-2); }
.vstack { display: flex; flex-direction: column; gap: var(--s-2); }
.spacer { flex: 1; }

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #D6D0BF; border-radius: 5px; border: 2px solid var(--bone); }
*::-webkit-scrollbar-thumb:hover { background: #C0B9A6; }
*::-webkit-scrollbar-track { background: transparent; }
body[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #2A2D45; border-color: var(--bone); }