/* QuantFox Design System — Colors & Type Tokens
   Source: QuantDinger/frontend/dist/index.html (login redesign overrides),
           QuantDinger/frontend/dist/css/theme-colors-*.css (Ant primary tokens)
   ---------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — PRIMARY (Ant Design legacy + QuantFox neon extensions)
     ============================================================ */
  --qf-primary:        #1890ff;  /* Ant primary, used in 95% of components */
  --qf-primary-hover:  #40a9ff;  /* Ant primary hover */
  --qf-primary-active: #096dd9;  /* link active / pressed */
  --qf-primary-bg:     #e6f7ff;  /* subtle primary surface */
  --qf-primary-border: #91d5ff;  /* secondary primary border */

  /* QuantFox sky / neon — used in login + AI / "premium" moments */
  --qf-sky-300: #7dd3fc;
  --qf-sky-400: #38bdf8;  /* primary glow / accent */
  --qf-sky-500: #0ea5e9;  /* primary button gradient start */
  --qf-sky-700: #0284c7;  /* deeper press / community FAB */
  --qf-sky-50:  #e0f2fe;

  /* Indigo "AI" companion — pairs with sky for AI gradients */
  --qf-indigo-400: #818cf8;
  --qf-indigo-500: #6366f1;
  --qf-indigo-600: #4f46e5;
  --qf-purple-600: #722ed1;  /* the "AI Optimize" purple */

  /* ============================================================
     COLOR — SEMANTIC / MARKET
     ============================================================ */
  --qf-success:       #52c41a;  /* Long / Buy / positive PnL */
  --qf-success-deep:  #3f8600;
  --qf-success-bg:    #f6ffed;
  --qf-success-border:#b7eb8f;

  --qf-danger:        #f5222d;  /* Short / Sell / negative PnL */
  --qf-danger-deep:   #cf1322;
  --qf-danger-bg:     #fff1f0;
  --qf-danger-border: #ffa39e;

  --qf-warning:       #faad14;  /* Membership gold / pending state */
  --qf-warning-deep:  #d48806;
  --qf-warning-bg:    #fffbe6;

  --qf-info: var(--qf-primary);

  /* ============================================================
     COLOR — NEUTRALS / SURFACES (Dark mode — default)
     ============================================================ */
  --qf-bg-app-dark:    #020617;  /* deepest — login marketing bg */
  --qf-bg-loading:     #0b0f19;  /* loading screen */
  --qf-bg-shell-dark:  #0d1421;  /* IDE + analysis shell */
  --qf-bg-panel-dark:  #19191b;  /* secondary surface */
  --qf-bg-card-dark:   rgba(15, 23, 42, 0.6);   /* glass card */
  --qf-bg-tooltip:     #0b1422;

  --qf-fg-1-dark: #f8fafc;  /* primary text */
  --qf-fg-2-dark: #e2e8f0;  /* secondary text */
  --qf-fg-3-dark: #cbd5e1;
  --qf-fg-4-dark: #94a3b8;  /* tertiary / metadata */
  --qf-fg-5-dark: #64748b;  /* disabled / inactive */

  --qf-border-dark:        rgba(255, 255, 255, 0.06);
  --qf-border-strong-dark: rgba(255, 255, 255, 0.10);
  --qf-border-primary-dark: rgba(56, 189, 248, 0.20);
  --qf-border-primary-active-dark: rgba(56, 189, 248, 0.40);

  /* ============================================================
     COLOR — NEUTRALS / SURFACES (Light mode — dashboard, profile, billing)
     ============================================================ */
  --qf-bg-app-light:    #f8fafc;
  --qf-bg-shell-light:  #f0f2f5;  /* Ant default body */
  --qf-bg-panel-light:  #ffffff;
  --qf-bg-card-light:   #ffffff;
  --qf-bg-hover-light:  #fafafa;

  --qf-fg-1-light: #1f2937;
  --qf-fg-2-light: #475569;
  --qf-fg-3-light: #64748b;
  --qf-fg-4-light: #94a3b8;
  --qf-fg-5-light: #cbd5e1;

  --qf-border-light:        #f0f0f0;
  --qf-border-strong-light: #d9d9d9;
  --qf-border-primary-light: var(--qf-primary-border);

  /* ============================================================
     SEMANTIC SHORTCUTS — default to dark mode
     ============================================================ */
  --qf-bg:     var(--qf-bg-shell-dark);
  --qf-bg-2:   var(--qf-bg-panel-dark);
  --qf-card:   var(--qf-bg-card-dark);
  --qf-fg-1:   var(--qf-fg-1-dark);
  --qf-fg-2:   var(--qf-fg-2-dark);
  --qf-fg-3:   var(--qf-fg-3-dark);
  --qf-fg-4:   var(--qf-fg-4-dark);
  --qf-fg-5:   var(--qf-fg-5-dark);
  --qf-border: var(--qf-border-dark);
  --qf-border-strong: var(--qf-border-strong-dark);

  /* ============================================================
     GRADIENTS — signature treatments
     ============================================================ */
  --qf-grad-primary:   linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  --qf-grad-primary-hover: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --qf-grad-ai:        linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
  --qf-grad-text-hero: linear-gradient(135deg, #ffffff 0%, #38bdf8 50%, #818cf8 100%);
  --qf-grad-text-mark: linear-gradient(135deg, #e0f2fe 0%, #38bdf8 50%, #818cf8 100%);
  --qf-grad-bg-hero:
    radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(129, 140, 248, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(2, 6, 23, 1) 0%, rgba(0, 0, 0, 1) 100%);
  --qf-grad-bg-grid:
    linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
  --qf-grad-stat-card-icon: linear-gradient(135deg, #e6f7ff, #bae7ff);
  --qf-grad-stat-card-icon-dark: linear-gradient(135deg, rgba(24,144,255,0.15), rgba(24,144,255,0.08));

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --qf-shadow-xs:   0 1px 4px rgba(24, 144, 255, 0.10);
  --qf-shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.04);
  --qf-shadow-md:   0 8px 24px rgba(2, 132, 199, 0.40);
  --qf-shadow-lg:   0 10px 30px rgba(0, 0, 0, 0.30);
  --qf-shadow-hero: 0 30px 60px -10px rgba(0, 0, 0, 0.90), 0 0 40px rgba(56, 189, 248, 0.15);
  --qf-shadow-glow:        0 0 20px rgba(56, 189, 248, 0.30);
  --qf-shadow-glow-strong: 0 0 40px rgba(56, 189, 248, 0.40), 0 0 80px rgba(129, 140, 248, 0.20);

  /* ============================================================
     RADII / BORDERS
     ============================================================ */
  --qf-radius-xs: 4px;
  --qf-radius-sm: 6px;
  --qf-radius-md: 12px;
  --qf-radius-lg: 16px;
  --qf-radius-xl: 24px;
  --qf-radius-pill: 999px;
  --qf-border-w: 1px;

  /* ============================================================
     SPACING — 4 / 8 px scale
     ============================================================ */
  --qf-s-1: 4px;
  --qf-s-2: 8px;
  --qf-s-3: 12px;
  --qf-s-4: 16px;
  --qf-s-5: 20px;
  --qf-s-6: 24px;
  --qf-s-8: 32px;
  --qf-s-10: 40px;
  --qf-s-12: 48px;
  --qf-s-14: 56px;

  /* ============================================================
     MOTION
     ============================================================ */
  --qf-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --qf-ease-soft: ease-in-out;
  --qf-dur-fast:  120ms;
  --qf-dur-base:  300ms;
  --qf-dur-slow:  600ms;

  /* ============================================================
     TYPE — STACKS
     ============================================================ */
  --qf-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC',
                Roboto, Helvetica, Arial, sans-serif;
  --qf-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular,
                  'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* ============================================================
     TYPE — BASE STYLES
     ============================================================ */
  --qf-fs-display: 64px;   /* hero "Quant Fox" wordmark */
  --qf-fs-h1:      36px;
  --qf-fs-h2:      28px;
  --qf-fs-h3:      22px;
  --qf-fs-h4:      18px;
  --qf-fs-body:    14px;   /* Ant default */
  --qf-fs-small:   12px;
  --qf-fs-tiny:    11px;   /* avatar-edit pill, badges */

  --qf-lh-tight:   1.2;
  --qf-lh-normal:  1.5;
  --qf-lh-relaxed: 1.6;

  --qf-fw-regular: 400;
  --qf-fw-medium:  500;
  --qf-fw-semibold:600;
  --qf-fw-bold:    700;
  --qf-fw-display: 800;

  --qf-tracking-tight:  -0.02em;
  --qf-tracking-normal: 0;
  --qf-tracking-wide:   0.5px;
  --qf-tracking-loose:  2px;
  --qf-tracking-mark:   6px;   /* used on the QUANT FOX wordmark */
}

/* ============================================================
   LIGHT MODE — flip semantic shortcuts
   ============================================================ */
:root[data-qf-mode="light"],
.qf-light {
  --qf-bg:     var(--qf-bg-app-light);
  --qf-bg-2:   var(--qf-bg-panel-light);
  --qf-card:   var(--qf-bg-card-light);
  --qf-fg-1:   var(--qf-fg-1-light);
  --qf-fg-2:   var(--qf-fg-2-light);
  --qf-fg-3:   var(--qf-fg-3-light);
  --qf-fg-4:   var(--qf-fg-4-light);
  --qf-fg-5:   var(--qf-fg-5-light);
  --qf-border: var(--qf-border-light);
  --qf-border-strong: var(--qf-border-strong-light);
}

/* ============================================================
   SEMANTIC ELEMENTS — opt-in via .qf scope to avoid leaking to
   host pages
   ============================================================ */
.qf, .qf-light {
  font-family: var(--qf-font-ui);
  font-size: var(--qf-fs-body);
  line-height: var(--qf-lh-normal);
  color: var(--qf-fg-1);
  background: var(--qf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.qf h1, .qf .qf-h1 {
  font-family: var(--qf-font-ui);
  font-size: var(--qf-fs-h1);
  font-weight: var(--qf-fw-display);
  line-height: var(--qf-lh-tight);
  letter-spacing: var(--qf-tracking-tight);
  margin: 0;
  color: var(--qf-fg-1);
}
.qf h2, .qf .qf-h2 {
  font-size: var(--qf-fs-h2);
  font-weight: var(--qf-fw-bold);
  line-height: var(--qf-lh-tight);
  margin: 0;
  color: var(--qf-fg-1);
}
.qf h3, .qf .qf-h3 {
  font-size: var(--qf-fs-h3);
  font-weight: var(--qf-fw-semibold);
  line-height: 1.3;
  margin: 0;
  color: var(--qf-fg-1);
}
.qf h4, .qf .qf-h4 {
  font-size: var(--qf-fs-h4);
  font-weight: var(--qf-fw-semibold);
  line-height: 1.4;
  margin: 0;
  color: var(--qf-fg-1);
}
.qf p, .qf .qf-body {
  font-size: var(--qf-fs-body);
  font-weight: var(--qf-fw-regular);
  line-height: var(--qf-lh-normal);
  color: var(--qf-fg-2);
}
.qf .qf-small,
.qf small {
  font-size: var(--qf-fs-small);
  color: var(--qf-fg-4);
}
.qf .qf-tiny {
  font-size: var(--qf-fs-tiny);
  color: var(--qf-fg-4);
}

/* Stat-card "TOTAL EQUITY" header label */
.qf .qf-eyebrow,
.qf .qf-stat-label {
  font-size: var(--qf-fs-small);
  font-weight: var(--qf-fw-semibold);
  letter-spacing: var(--qf-tracking-wide);
  text-transform: uppercase;
  color: var(--qf-fg-4);
}

/* The "QUANT FOX" wordmark — used on splash + hero */
.qf .qf-wordmark {
  font-family: var(--qf-font-ui);
  font-size: var(--qf-fs-display);
  font-weight: var(--qf-fw-display);
  letter-spacing: var(--qf-tracking-mark);
  text-transform: uppercase;
  background: var(--qf-grad-text-mark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 4px 20px rgba(56, 189, 248, 0.30);
  line-height: 1;
}

.qf code,
.qf pre,
.qf .qf-mono,
.qf .qf-ticker,
.qf .qf-num {
  font-family: var(--qf-font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}
.qf .qf-ticker {
  font-weight: var(--qf-fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qf a {
  color: var(--qf-primary);
  text-decoration: none;
  transition: color var(--qf-dur-fast) var(--qf-ease);
}
.qf a:hover  { color: var(--qf-primary-hover); }
.qf a:active { color: var(--qf-primary-active); }

.qf .qf-pos { color: var(--qf-success); }
.qf .qf-neg { color: var(--qf-danger);  }

/* Selection follows brand */
.qf ::selection { background: var(--qf-primary); color: #fff; }

/* Scrollbar (dark mode) */
.qf::-webkit-scrollbar,
.qf *::-webkit-scrollbar { width: 8px; height: 8px; }
.qf::-webkit-scrollbar-thumb,
.qf *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
.qf::-webkit-scrollbar-thumb:hover,
.qf *::-webkit-scrollbar-thumb:hover {
  background: rgba(56,189,248,0.30);
}