/* ============================================================
   DataWeaver Gateway Admin — Design Tokens
   See: public/admin/design-system/MASTER.md
   ============================================================ */

/* ── Dark mode (default) ─────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:     #12141a;
  --s1:     #14161d;
  --s2:     #1a1d25;
  --s3:     #262a35;
  --card:   #181b22;
  --chrome: rgba(18, 20, 26, .96);

  /* Borders */
  --b:  #27272a;
  --bh: #3f3f46;
  --bv: #52525b;

  /* Brand accent (logo + spotlight only) */
  --accent:   #ff5c5c;
  --accent-h: #ff7070;
  --a-bg:     rgba(255, 92, 92, .10);
  --a-bd:     rgba(255, 92, 92, .28);
  --a-glow:   rgba(255, 92, 92, .22);

  /* Semantic */
  --green:  #22c55e; --g-bg:  rgba(34, 197, 94, .10);  --g-bd:  rgba(34, 197, 94, .25);
  --red:    #ef4444; --r-bg:  rgba(239, 68, 68, .10);  --r-bd:  rgba(239, 68, 68, .25);
  --amber:  #f59e0b; --am-bg: rgba(245, 158, 11, .10); --am-bd: rgba(245, 158, 11, .25);
  --sky:    #3b82f6; --sk-bg: rgba(59, 130, 246, .10); --sk-bd: rgba(59, 130, 246, .25);
  --teal:   #14b8a6; --tl-bg: rgba(20, 184, 166, .10); --tl-bd: rgba(20, 184, 166, .25);

  /* Text */
  --t0: #fafafa;
  --t1: #e4e4e7;
  --t2: #71717a;
  --t3: #52525b;

  /* Misc */
  --grid-line: rgba(255, 255, 255, .032);

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .25);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .3),  0 0 0 1px rgba(255, 255, 255, .03);
  --sh-lg: 0 12px 28px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .03);

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Spacing (4px step) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fast: 120ms;
  --dur:  200ms;

  /* Type */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* z-index scale */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 50;
  --z-modal:   100;
  --z-toast:   200;

  /* ── Backward-compat aliases for payment/meeting pages ── */
  /* payment.html / meeting*.html 沿用 --panel / --border / --muted 命名,这里桥接到主 token */
  --panel:        var(--card);
  --border:       var(--b);
  --muted:        var(--t2);
  --text:         var(--t0);
  --bg-card:      var(--card);
  --bg-elev:      var(--s2);
  --primary:      var(--sky);
  --primary-dark: #2563eb;
  --primary-hi:   #60a5fa;
  --danger:       var(--red);
  --err:          var(--red);
  --ok:           var(--green);
  --success:      var(--green);
  --warn:         var(--amber);
  /* 注:meeting 系列的 --accent 是紫色 #b56cff(secondary spotlight),与 index.html 红色 --accent 含义不同,保留各页面 :root 自定义 */
}

/* ── Light mode ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:     #f5f5f7;
  --s1:     #eeeef0;
  --s2:     #e8e8ea;
  --s3:     #d4d4d8;
  --card:   #ffffff;
  --chrome: rgba(245, 245, 247, .96);

  --b:  #d4d4d8;
  --bh: #a1a1aa;
  --bv: #71717a;

  --accent:   #e04545;
  --accent-h: #d63535;
  --a-bg:     rgba(224, 69, 69, .08);
  --a-bd:     rgba(224, 69, 69, .25);
  --a-glow:   rgba(224, 69, 69, .18);

  --green:  #16a34a; --g-bg:  rgba(22, 163, 74, .08);  --g-bd:  rgba(22, 163, 74, .20);
  --red:    #dc2626; --r-bg:  rgba(220, 38, 38, .08);  --r-bd:  rgba(220, 38, 38, .20);
  --amber:  #d97706; --am-bg: rgba(217, 119, 6, .08);  --am-bd: rgba(217, 119, 6, .20);
  --sky:    #2563eb; --sk-bg: rgba(37, 99, 235, .08);  --sk-bd: rgba(37, 99, 235, .20);
  --teal:   #0d9488; --tl-bg: rgba(13, 148, 136, .08); --tl-bd: rgba(13, 148, 136, .20);

  --t0: #18181b;
  --t1: #27272a;
  --t2: #52525b;
  --t3: #a1a1aa;

  --grid-line: rgba(0, 0, 0, .03);

  --sh-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .08),  0 0 0 1px rgba(0, 0, 0, .04);
  --sh-lg: 0 12px 28px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);
}

[data-theme="light"] select option { background: #fff; }

/* ── Reset (minimal) ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 13px; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}