/* ==========================================================================
   百丰资管 Design System — Colors & Type
   Baifeng Asset Management CRM
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
/* Chinese: Noto Sans SC (Google Fonts fallback — user should confirm)
   Latin:   IBM Plex Sans + IBM Plex Mono (finance-friendly tabular numerals)
   Display numerals: IBM Plex Sans with tabular-nums */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLORS — raw palette
     ============================================================ */

  /* Brand — 靛蓝 Indigo (trust, depth, finance) */
  --brand-50:  #eef2f8;
  --brand-100: #dae3f0;
  --brand-200: #b4c4dd;
  --brand-300: #8aa1c6;
  --brand-400: #5e7fae;
  --brand-500: #3a5f93;
  --brand-600: #1f4578;   /* primary */
  --brand-700: #163358;
  --brand-800: #0f2640;
  --brand-900: #0a1a2e;

  /* Accent — 金 Gold (prosperity / 丰 abundance) — use sparingly */
  --gold-50:   #fbf6e8;
  --gold-100:  #f5e8bf;
  --gold-200:  #edd488;
  --gold-300:  #e0bc52;
  --gold-400:  #c9a23a;   /* accent */
  --gold-500:  #a8862a;
  --gold-600:  #836820;

  /* Neutrals — cool gray, slightly blue-tinted to pair with indigo */
  --gray-0:    #ffffff;
  --gray-25:   #fafbfc;
  --gray-50:   #f4f6f8;
  --gray-100:  #eceff3;
  --gray-200:  #dde2e8;
  --gray-300:  #c6ccd5;
  --gray-400:  #9aa3b0;
  --gray-500:  #6b7380;
  --gray-600:  #4a515c;
  --gray-700:  #333841;
  --gray-800:  #21252c;
  --gray-900:  #13161b;

  /* Semantic — finance-tuned */
  --success-50:  #e8f5ee;
  --success-500: #1f8a4c;   /* gain green */
  --success-700: #156136;

  --danger-50:   #fdecec;
  --danger-500:  #c8322f;   /* loss red — in China red = gain, but we use international convention for CRM status */
  --danger-700:  #8e2320;

  --warning-50:  #fdf4e3;
  --warning-500: #d89216;
  --warning-700: #96630e;

  --info-50:     #e7f1fa;
  --info-500:    #1d6fb8;
  --info-700:    #144f84;

  /* Finance-specific: in Chinese markets, red=up green=down.
     Use these for market figures, not general status. */
  --up-500:      #c8322f;   /* 涨 red */
  --down-500:    #1f8a4c;   /* 跌 green */

  /* ============================================================
     SEMANTIC TOKENS — use these in components
     ============================================================ */

  /* Foreground */
  --fg-1: var(--gray-900);      /* primary text */
  --fg-2: var(--gray-700);      /* secondary text */
  --fg-3: var(--gray-500);      /* tertiary / labels */
  --fg-4: var(--gray-400);      /* disabled / hint */
  --fg-on-brand: #ffffff;
  --fg-brand:    var(--brand-600);
  --fg-link:     var(--brand-600);

  /* Background */
  --bg-canvas:   var(--gray-50);     /* app background */
  --bg-surface:  var(--gray-0);      /* cards, panels */
  --bg-sunken:   var(--gray-100);    /* inset / wells */
  --bg-subtle:   var(--gray-25);
  --bg-brand:    var(--brand-600);
  --bg-brand-subtle: var(--brand-50);

  /* Border */
  --border-1: var(--gray-200);       /* default */
  --border-2: var(--gray-300);       /* emphasized */
  --border-strong: var(--gray-400);
  --border-brand:  var(--brand-600);

  /* Elevation — subtle, layered */
  --shadow-xs: 0 1px 2px rgba(15, 38, 64, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 38, 64, 0.06), 0 1px 2px rgba(15, 38, 64, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 38, 64, 0.08), 0 2px 4px rgba(15, 38, 64, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 38, 64, 0.12), 0 4px 8px rgba(15, 38, 64, 0.06);
  --shadow-xl: 0 24px 64px rgba(15, 38, 64, 0.16);
  --shadow-inset: inset 0 1px 2px rgba(15, 38, 64, 0.06);

  /* Radii — restrained, utilitarian */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;      /* buttons, inputs */
  --radius-lg: 8px;      /* cards */
  --radius-xl: 12px;     /* panels */
  --radius-full: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-sans: "IBM Plex Sans", "Noto Sans SC", -apple-system, "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-sc:   "Noto Sans SC", "IBM Plex Sans", "PingFang SC",
               "Microsoft YaHei", -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Cascadia Code", Consolas,
               "Liberation Mono", monospace;
  --font-num:  "IBM Plex Sans", "IBM Plex Mono", tabular-nums;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Sizes (tight, dense — CRM reads like a tool, not marketing site) */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;    /* body default in dense CRM UIs */
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-allcaps: 0.08em;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */
.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-body-md {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-allcaps);
}
.t-num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   RESET-LITE
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6, p { margin: 0; }