/* ============================================================
   SIGNAL NOW · 시그널나우 — Colors & Type Foundations
   Korean retail-investor stock-signal app.
   Convention: RED = up / gain / 상승, BLUE = down / loss / 하락
   Derived from the real app UI + brand logo.
   ============================================================ */

/* ---- Pretendard (Korean fintech standard) ----
   Loaded from the official CDN. If you need offline/self-hosted,
   download from https://github.com/orioncactus/pretendard and
   drop the woff2 files in fonts/, then swap the @import below. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  /* ============ BRAND ============ */
  --brand-red:        #FE2C55;  /* primary action, gains, active tab, logo arrow */
  --brand-red-press:  #E61E45;  /* pressed / darker red */
  --brand-red-soft:   #FFF0F2;  /* red tint surface (gain bg, news badge) */
  --brand-blue:       #2A78F9;  /* losses, secondary brand (logo down-bars) */
  --brand-blue-press: #1A63DE;
  --brand-blue-soft:  #EEF4FE;  /* blue tint surface (loss bg) */

  /* ============ FINANCIAL SEMANTICS ============ */
  --up:        var(--brand-red);   /* 상승 */
  --up-soft:   var(--brand-red-soft);
  --down:      var(--brand-blue);  /* 하락 */
  --down-soft: var(--brand-blue-soft);
  --flat:      #8B9098;            /* 보합 / unchanged */

  /* ============ NEUTRALS (ink) ============ */
  --ink-900: #111111;  /* primary text / titles */
  --ink-700: #3A3D42;  /* strong body */
  --ink-500: #6B7079;  /* secondary text, source lines */
  --ink-400: #9AA0A8;  /* tertiary, placeholders, meta */
  --ink-300: #C2C7CE;  /* disabled, faint icons */

  /* ============ SURFACES & LINES ============ */
  --bg:        #FFFFFF;  /* body / cards */
  --bg-subtle: #F7F8FA;  /* lifted section */
  --fill-100:  #F2F3F5;  /* header bar, gray cards, chips-resting */
  --fill-200:  #E8EAED;  /* hover fill */
  --line:      #ECEEF1;  /* hairline borders / dividers */
  --line-strong:#DDE1E6;

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;   /* cards */
  --r-xl: 28px;
  --r-pill: 999px;

  /* ============ SHADOWS (light, soft — Toss-like) ============ */
  --shadow-sm: 0 1px 2px rgba(17,17,17,.05), 0 1px 1px rgba(17,17,17,.04);
  --shadow-md: 0 4px 16px rgba(17,17,17,.06), 0 1px 3px rgba(17,17,17,.05);
  --shadow-lg: 0 12px 32px rgba(17,17,17,.10), 0 2px 8px rgba(17,17,17,.05);
  --shadow-red: 0 8px 24px rgba(254,44,85,.28);

  /* ============ SPACING (4px base) ============ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ============ TYPE ============ */
  --font-sans: "Pretendard", "Pretendard Variable", -apple-system,
               BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic",
               system-ui, sans-serif;
  /* Tabular numerals for prices/percentages */
  --font-num: "Pretendard", system-ui, sans-serif;

  --fs-display: 56px;  --lh-display: 1.1;   --fw-display: 800;
  --fs-h1: 40px;       --lh-h1: 1.15;       --fw-h1: 800;
  --fs-h2: 30px;       --lh-h2: 1.2;        --fw-h2: 700;
  --fs-h3: 22px;       --lh-h3: 1.3;        --fw-h3: 700;
  --fs-title: 18px;    --lh-title: 1.4;     --fw-title: 700;
  --fs-body: 16px;     --lh-body: 1.55;     --fw-body: 400;
  --fs-sm: 14px;       --lh-sm: 1.5;
  --fs-cap: 13px;      --lh-cap: 1.45;
  --fs-micro: 11px;    --lh-micro: 1.4;
}

/* ============ SEMANTIC TEXT CLASSES ============ */
.sn-display { font: var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-sans); letter-spacing:-.02em; color:var(--ink-900); }
.sn-h1 { font: var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing:-.02em; color:var(--ink-900); }
.sn-h2 { font: var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing:-.015em; color:var(--ink-900); }
.sn-h3 { font: var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing:-.01em; color:var(--ink-900); }
.sn-title { font: var(--fw-title) var(--fs-title)/var(--lh-title) var(--font-sans); color:var(--ink-900); }
.sn-body { font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans); color:var(--ink-700); }
.sn-sm { font: 400 var(--fs-sm)/var(--lh-sm) var(--font-sans); color:var(--ink-500); }
.sn-cap { font: 500 var(--fs-cap)/var(--lh-cap) var(--font-sans); color:var(--ink-400); }

/* numbers: prices & percentages */
.sn-num { font-family:var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; font-weight:700; }
.sn-up   { color: var(--up); }
.sn-down { color: var(--down); }