/* @import 必须位于文件首行才会生效（此前 Google Fonts 的 @import 位置靠后，从未真正加载） */
@import url('latin-fonts.css');
/* =========================================================================
   Loopin Design System — Colors & Typography
   Parent brand: Loopin 无尽维度
   Sub-brands:   ASTROLABE ACADEMY 星盘学院, CoinWise 星算智库, Bitor.ai
   -------------------------------------------------------------------------
   The system is built around one anchor color (Loopin Orange #F08D01) and
   a deep neutral spine (near-black to off-white). Every brand under the
   Loopin umbrella shares this orange + black DNA; sub-brands differentiate
   through gradient direction, mark style, and accent neutrals — never new
   hues invented from scratch.
   ========================================================================= */

/* ---------- Web fonts ---------- */
/* Brand display: Barlow Semi Condensed — wide-stroke geometric sans, the
   nearest open-source match to the custom logotypes seen on ASTROLABE
   ACADEMY and CoinWise wordmarks. Substitute flagged: see README. */
/* Body / UI: Inter — neutral grotesque. */
/* Chinese (CN): MiSans VF — uploaded brand font (Xiaomi MiSans variable).
   Single variable file covers weights 100–900. Used everywhere CN text
   appears across the Loopin family. */
/* Mono / data: JetBrains Mono — for tickers, code, telemetry. */
@font-face {
  font-family: 'MiSans VF AA';
  src: url('fonts/MiSansVF_Overlay.subset.woff2') format('woff2-variations'),
       url('fonts/MiSansVF_Overlay.subset.woff2') format('woff2'),
       url('fonts/MiSansVF_Overlay.ttf') format('truetype-variations'),
       url('fonts/MiSansVF_Overlay.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Google Fonts 已本地化（fonts.googleapis.com 国内不可达）：见文件首行的 @import latin-fonts.css */

:root {
  /* ===================================================================
     COLOR — Brand
     ===================================================================
     Loopin Orange is THE anchor. Sampled from the original logotypes at
     RGB(240, 141, 1) → #F08D01.
  */
  --brand-orange:        #F08D01;   /* Primary brand orange */
  --brand-orange-600:    #D67D00;   /* Hover / pressed */
  --brand-orange-700:    #B86A00;   /* Deep ramp, used in gradients */
  --brand-orange-400:    #F5A332;   /* Lighter highlight */
  --brand-orange-300:    #FAC174;   /* Warm wash */
  --brand-orange-100:    #FFEFD6;   /* Tinted surface */
  --brand-orange-50:     #FFF7E8;   /* Very light tint */

  --brand-black:         #0B0B0C;   /* True logo black, slight warm */
  --brand-white:         #FFFFFF;
  --brand-cream:         #F7F2E9;   /* Studio off-white seen on boards */

  /* CoinWise often pairs orange with a warm-cool gradient.
     Astrolabe Academy uses pure orange + black.
     Bitor.ai (AI) leans into electric orange + tech-black with subtle
     teal accent. We keep the teal whisper-quiet so the system stays
     monochromatic-warm by default. */
  --brand-orange-warm:   #E8551A;   /* Sunset-warm, gradient end */
  --brand-orange-amber:  #F5B500;   /* Amber gradient stop */
  --bitor-spark:         #00C2C7;   /* AI accent — use sparingly */

  /* CoinWise product family uses a cyan/teal as the active state in its
     dashboards, paired with deep navy surfaces (Trader Monitor) or pure
     black (the Screener / 100x finder). Orange is reserved for live
     entry signals and CTAs in those products. */
  --cw-cyan:        #00C2C7;
  --cw-cyan-soft:   #1A6D7C;   /* Dimmer fill / active background */
  --cw-navy-1000:   #0E1620;   /* Deepest, page bg in Trader Monitor */
  --cw-navy-900:    #15202E;   /* App surface */
  --cw-navy-800:    #1B2838;   /* Card / panel */
  --cw-navy-700:    #243246;   /* Border / sunken */

  /* StarAlpha 星启投研 — managed-account / wealth-mgmt sub-brand.
     Reads more institutional than the trader-tools surfaces: deep
     midnight-blue ground, brushed-gold accent (warm yellow tilted off
     pure orange), hairline-thin chrome. Orange remains the family link
     but is used sparingly (CTA / capital-flow accents). */
  --sa-midnight-1000:  #0A111C;   /* Deepest ground */
  --sa-midnight-900:   #0F1A2A;   /* Surface */
  --sa-midnight-800:   #16243A;   /* Card */
  --sa-midnight-700:   #1F3050;   /* Border */
  --sa-gold:           #C9A24A;   /* Brushed-gold capital accent */
  --sa-gold-soft:      #E6CC85;

  /* ===================================================================
     COLOR — Neutrals (warm-tilted)
     ===================================================================
     Slightly warm grays. Never use pure CSS grays (#666 etc) — those
     read as "system UI" against our orange and feel cheap.
  */
  --ink-1000:  #0B0B0C;   /* Deepest black, large surfaces */
  --ink-900:   #141416;
  --ink-800:   #1E1E22;   /* Elevated dark surface */
  --ink-700:   #2A2A30;
  --ink-600:   #3A3A42;   /* Border on dark */
  --ink-500:   #5A5A66;
  --ink-400:   #8A8A95;   /* Secondary text on light */
  --ink-300:   #B8B8C0;
  --ink-200:   #DCDCE0;   /* Border on light */
  --ink-100:   #ECECEE;   /* Hairline / divider */
  --ink-50:    #F6F6F7;   /* Page wash */
  --ink-0:     #FFFFFF;

  /* ===================================================================
     COLOR — Semantic
     ===================================================================
     The products are FINANCIAL — gain/loss colors are mandatory and we
     use the Asia-market convention (red = up, green = down) since the
     primary audience is CN retail investors. Both directions are
     defined; products switch via [data-market="us"] override below.
  */
  --gain:        #E03A3A;   /* CN/HK convention: red = up */
  --gain-soft:   #F8E0E0;
  --loss:        #1FA37E;   /* green = down */
  --loss-soft:   #DFF1EB;

  --info:        #2E7DD7;
  --warn:        #F5A623;
  --danger:      #E03A3A;
  --success:     #1FA37E;

  /* ===================================================================
     SEMANTIC TOKENS — Surfaces, text, borders (LIGHT default)
     =================================================================== */
  --bg-page:        var(--ink-0);
  --bg-surface:     var(--ink-0);
  --bg-elevated:    var(--ink-0);
  --bg-sunken:      var(--ink-50);
  --bg-inverse:     var(--ink-1000);

  --fg-1:           var(--ink-1000);   /* Primary text */
  --fg-2:           var(--ink-700);    /* Secondary text */
  --fg-3:           var(--ink-500);    /* Tertiary / metadata */
  --fg-4:           var(--ink-400);    /* Quaternary / placeholders */
  --fg-on-brand:    var(--brand-white);
  --fg-on-inverse:  var(--ink-100);

  --border-1:       var(--ink-100);    /* Hairline */
  --border-2:       var(--ink-200);    /* Default control border */
  --border-3:       var(--ink-300);    /* Stronger */
  --border-brand:   var(--brand-orange);

  --accent:         var(--brand-orange);
  --accent-hover:   var(--brand-orange-600);
  --accent-press:   var(--brand-orange-700);
  --accent-soft:    var(--brand-orange-50);

  /* ===================================================================
     SHADOWS — soft, warm-tinted, never bluish
     =================================================================== */
  --shadow-1: 0 1px 2px rgba(20, 14, 0, 0.06);
  --shadow-2: 0 4px 14px rgba(20, 14, 0, 0.08);
  --shadow-3: 0 12px 32px rgba(20, 14, 0, 0.10);
  --shadow-4: 0 24px 60px rgba(20, 14, 0, 0.14);
  --shadow-glow-orange: 0 0 0 4px rgba(240, 141, 1, 0.18);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ===================================================================
     RADII
     =================================================================== */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 9999px;
  --r-card: 14px;          /* Default card radius — soft but technical */
  --r-control: 8px;        /* Buttons, inputs */

  /* ===================================================================
     SPACING (4-pt base, dense at the small end)
     =================================================================== */
  --s-0: 0; /* @kind spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ===================================================================
     MOTION
     =================================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */   /* default UI */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* gentle overshoot, brand pop */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */
  --dur-page:    520ms; /* @kind other */

  /* ===================================================================
     TYPOGRAPHY — Families
     =================================================================== */
  --font-display: 'Barlow Semi Condensed', 'MiSans VF AA', system-ui, sans-serif;
  --font-body:    'Inter', 'MiSans VF AA', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-cn:      'MiSans VF AA', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — informed by financial UI density (compact body, big display) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  --lh-tight: 1.05; /* @kind font */
  --lh-snug:  1.2; /* @kind font */
  --lh-base:  1.5; /* @kind font */
  --lh-loose: 1.7; /* @kind font */

  --tracking-display: -0.02em;
  --tracking-wordmark: 0.06em;       /* Brand display — wide spacing */
  --tracking-eyebrow: 0.18em;        /* All-caps labels */

  /* Container max-widths */
  --w-prose: 68ch;
  --w-narrow: 720px;
  --w-default: 1120px;
  --w-wide: 1440px;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"], .theme-dark {
  --bg-page:     var(--ink-1000);
  --bg-surface:  var(--ink-900);
  --bg-elevated: var(--ink-800);
  --bg-sunken:   var(--ink-1000);
  --bg-inverse:  var(--ink-0);

  --fg-1:  #F2F2F4;
  --fg-2:  #C9C9D0;
  --fg-3:  #9698A0;
  --fg-4:  #6E707A;
  --fg-on-inverse: var(--ink-1000);

  --border-1: #1F1F23;
  --border-2: #2A2A30;
  --border-3: #3A3A42;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-4: 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ---------- Market-convention switch ---------- */
[data-market="us"], [data-market="eu"] {
  --gain: #1FA37E;       /* US/EU: green = up */
  --gain-soft: #DFF1EB;
  --loss: #E03A3A;       /* red = down */
  --loss-soft: #F8E0E0;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================= */
html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
body { font-size: var(--fs-15); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; }

.brand-mark, .display-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 96px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
}
.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}
.h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}

.body-lg { font-size: var(--fs-18); line-height: var(--lh-loose); }
.body    { font-size: var(--fs-15); line-height: var(--lh-base); }
.body-sm { font-size: var(--fs-13); line-height: var(--lh-base); color: var(--fg-2); }
.caption { font-size: var(--fs-12); line-height: 1.4; color: var(--fg-3); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.mono       { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; }
.tabular    { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.numeric-lg { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-32); letter-spacing: -0.01em; font-feature-settings: 'tnum' 1; }
.numeric    { font-family: var(--font-mono); font-weight: 500; font-feature-settings: 'tnum' 1; }

.cn { font-family: var(--font-cn); }   /* Chinese-only block */

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------- Helpers ---------- */
.text-fg-1 { color: var(--fg-1); }
.text-fg-2 { color: var(--fg-2); }
.text-fg-3 { color: var(--fg-3); }
.text-brand { color: var(--brand-orange); }
.text-gain { color: var(--gain); }
.text-loss { color: var(--loss); }

.bg-brand { background: var(--brand-orange); color: var(--brand-white); }
.bg-ink   { background: var(--ink-1000); color: var(--brand-white); }

/* Brand gradient — used on hero panels, large CTAs, sub-brand banners */
.bg-gradient-brand {
  background: linear-gradient(135deg, var(--brand-orange-warm) 0%, var(--brand-orange) 50%, var(--brand-orange-amber) 100%);
}
.bg-gradient-orange-black {
  background: linear-gradient(135deg, var(--brand-orange) 0%, #6B3D00 60%, var(--ink-1000) 100%);
}