/* ============================================================
   Design tokens — operational / technical dense
   Linear / Vercel / Arc / Raycast class
   ============================================================ */

:root {
  /* --- palette: deep blue + cool grey + semantic accents --- */
  --c-bg:           #0b0f17;
  --c-surface:      #11161f;
  --c-surface-2:    #161c26;
  --c-surface-3:    #1c2330;
  --c-border:       #232c3a;
  --c-border-soft:  #1a2230;
  --c-hover:        #1f2733;

  --c-fg:           #e6ecf3;
  --c-fg-2:         #b9c2cf;
  --c-fg-3:         #8590a8;
  --c-fg-4:         #5b6577;

  --c-accent:       #5b8def;          /* primary blue */
  --c-accent-2:     #7ba1ff;
  --c-accent-dim:   #1f2c4d;
  --c-accent-glow:  rgba(91,141,239,0.18);

  --c-cyan:         #4dd0e1;          /* secondary accent */
  --c-violet:       #a78bfa;

  --c-ok:           #34d399;
  --c-ok-soft:      rgba(52,211,153,0.12);
  --c-warn:         #f5a524;
  --c-warn-soft:    rgba(245,165,36,0.14);
  --c-err:          #ef4444;
  --c-err-soft:     rgba(239,68,68,0.14);
  --c-info:         #60a5fa;
  --c-info-soft:    rgba(96,165,250,0.12);

  /* platform tags */
  --c-tmall:        #ff6a00;
  --c-jd:           #e1251b;
  --c-amazon:       #ff9900;

  /* --- spacing --- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* --- radii (sharp / small) --- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-pill: 999px;

  /* --- typography --- */
  --ff-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
             "Microsoft YaHei", "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas",
             "Roboto Mono", ui-monospace, monospace;

  --fz-10: 10px;
  --fz-11: 11px;
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-24: 24px;
  --fz-28: 28px;
  --fz-32: 32px;
  --fz-40: 40px;

  --lh-tight: 1.2;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  /* --- shadow --- */
  --sh-1: 0 1px 2px rgba(0,0,0,0.32);
  --sh-2: 0 4px 12px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.24);
  --sh-3: 0 12px 40px rgba(0,0,0,0.48), 0 2px 6px rgba(0,0,0,0.32);

  /* --- layout --- */
  --nav-w: 220px;
  --topbar-h: 52px;
  --content-max: 1600px;
}

/* Light theme tokens (optional toggle) */
:root[data-theme="light"] {
  --c-bg:           #f6f8fb;
  --c-surface:      #ffffff;
  --c-surface-2:    #f1f4f9;
  --c-surface-3:    #e8edf4;
  --c-border:       #d8dee8;
  --c-border-soft:  #e6eaf1;
  --c-hover:        #eaeef5;

  --c-fg:           #1a2230;
  --c-fg-2:         #3b4658;
  --c-fg-3:         #6b7689;
  --c-fg-4:         #97a0b3;

  --c-accent-dim:   #e8efff;
  --c-accent-glow:  rgba(91,141,239,0.10);
}