/* style.css \u2014 Finance Dashboard Design System */

/* ============================================
   FONTS
   ============================================ */
:root {
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-data: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
}

/* ============================================
   TYPE SCALE \u2014 Fluid with clamp()
   ============================================ */
:root {
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --text-sm:   clamp(0.75rem,   0.7rem  + 0.25vw, 0.875rem);
  --text-base: clamp(0.875rem,  0.82rem + 0.3vw,  1rem);
  --text-lg:   clamp(1rem,      0.9rem  + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.25rem,   1rem    + 1vw,    1.75rem);
  --text-2xl:  clamp(1.5rem,    1.1rem  + 1.5vw,  2.25rem);
}

/* ============================================
   4px SPACING SYSTEM
   ============================================ */
:root {
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
}

/* ============================================
   RADIUS & TRANSITION
   ============================================ */
:root {
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   CUSTOM PALETTE: Finance Dark
   Dark mode default. Monochrome with strategic
   red/green for Chinese market convention.
   Accent: muted slate-teal.
   ============================================ */

/* --- DARK MODE (Default) --- */
:root, [data-theme="dark"] {
  --color-bg:             #0c0d0f;
  --color-surface:        #131519;
  --color-surface-2:      #1a1c22;
  --color-surface-offset: #16181e;
  --color-surface-offset-2: #1e2028;
  --color-surface-dynamic: #252830;
  --color-divider:        #2a2d36;
  --color-border:         #353842;

  --color-text:           #e0e2e8;
  --color-text-muted:     #8b8f9a;
  --color-text-faint:     #555963;
  --color-text-inverse:   #131519;

  /* Accent: Muted Slate-Teal */
  --color-accent:         #5b94a6;
  --color-accent-hover:   #4a7f91;
  --color-accent-active:  #3a6a7c;
  --color-accent-highlight: #1e2e35;

  /* Chinese market: RED = up, GREEN = down */
  --color-up:             #e74c4c;
  --color-up-bg:          rgba(231, 76, 76, 0.1);
  --color-down:           #2ebd6e;
  --color-down-bg:        rgba(46, 189, 110, 0.1);
  --color-flat:           #8b8f9a;

  /* Fund type badge colors */
  --color-badge-stock:    #e89234;
  --color-badge-mixed:    #5b94a6;
  --color-badge-index:    #9a6fd8;
  --color-badge-bond:     #8b8f9a;
  --color-badge-qdii:     #45a8a0;
  --color-badge-fof:      #c478a8;
  --color-badge-other:    #7a7e88;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

/* --- LIGHT MODE --- */
[data-theme="light"] {
  --color-bg:             #f0f1f3;
  --color-surface:        #f8f8fa;
  --color-surface-2:      #ffffff;
  --color-surface-offset: #eaebee;
  --color-surface-offset-2: #e2e3e7;
  --color-surface-dynamic: #d9dae0;
  --color-divider:        #d0d2d8;
  --color-border:         #c4c6ce;

  --color-text:           #1a1c22;
  --color-text-muted:     #5c6070;
  --color-text-faint:     #9a9da8;
  --color-text-inverse:   #f8f8fa;

  --color-accent:         #3a7a8c;
  --color-accent-hover:   #2c6270;
  --color-accent-active:  #1f4c58;
  --color-accent-highlight: #d4e8ee;

  --color-up:             #c83232;
  --color-up-bg:          rgba(200, 50, 50, 0.08);
  --color-down:           #1a8a4a;
  --color-down-bg:        rgba(26, 138, 74, 0.08);
  --color-flat:           #5c6070;

  --color-badge-stock:    #c47820;
  --color-badge-mixed:    #3a7a8c;
  --color-badge-index:    #7a50b8;
  --color-badge-bond:     #6c7080;
  --color-badge-qdii:     #2e8a82;
  --color-badge-fof:      #a8588a;
  --color-badge-other:    #6a6e78;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
}