/* ============================================================
   纽约华人网360 — Design System Tokens
   Source: colors_and_type.css (design handoff)
   Usage: <link rel="stylesheet" href="/static/ds.css"> (first)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand / Primary (Blue) ───────────────────────────── */
  --p:   #1a6fc4;
  --pd:  #155a9e;
  --pl:  #e8f1fb;
  --p-50:#f0f7ff;

  /* Navy */
  --navy:        #0a1e46;
  --navy-glass:  rgba(10,30,70,.92);
  --navy-grad-a: rgba(5,18,65,.88);
  --navy-grad-b: rgba(18,52,130,.82);

  /* ── Category accent colors ───────────────────────────── */
  --c-house:   #1a6fc4;  --c-house-ink: #1d4ed8;  --c-house-bg: #dbeafe;
  --c-job:     #f57c00;  --c-job-ink:   #c2410c;  --c-job-bg:   #ffedd5;
  --c-used:    #2e7d32;  --c-used-ink:  #15803d;  --c-used-bg:  #dcfce7;
  --c-service: #7c3aed;  --c-service-ink:#7c3aed; --c-service-bg:#f3e8ff;

  /* ── Functional / status ──────────────────────────────── */
  --r:    #e53935;
  --rd:   #c62828;
  --o:    #f57c00;
  --od:   #e65c00;
  --o2:   #ff9800;
  --g:    #2e7d32;
  --gold: #f59e0b;
  --gold-l:#ffd54f;

  /* ── Text ─────────────────────────────────────────────── */
  --tx:   #1e293b;
  --mu:   #64748b;
  --faint:#94a3b8;
  --on-dark:       #ffffff;
  --on-dark-soft:  rgba(255,255,255,.75);

  /* ── Surfaces & lines ─────────────────────────────────── */
  --bg:     #f0f4f9;
  --wh:     #fff;
  --bd:     #e2e8f0;
  --bd-soft:#f1f5f9;
  --chip-bg:#f8fafc;

  /* ── Radius scale ─────────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  16px;
  --r-2xl: 18px;
  --r-pill:999px;
  --radius:14px;

  /* ── Shadow / elevation ───────────────────────────────── */
  --sh-xs: 0 1px 6px rgba(0,0,0,.05);
  --sh-sm: 0 2px 12px rgba(0,0,0,.07);
  --sh-md: 0 4px 20px rgba(26,111,196,.10);
  --sh-lg: 0 12px 32px rgba(26,111,196,.14);
  --sh-xl: 0 20px 60px rgba(0,0,0,.25);
  --sh-nav:0 2px 16px rgba(0,0,30,.25);
  --shadow:var(--sh-md);

  /* ── Spacing scale (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;

  /* ── Layout ───────────────────────────────────────────── */
  --container: 1200px;
  --container-narrow: 1100px;
  --nav-h: 52px;

  /* ── Type families ────────────────────────────────────── */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-num: var(--font-sans);

  /* ── Type scale (px) ──────────────────────────────────── */
  --t-hero:  52px;
  --t-hero-m:32px;
  --t-h1:    22px;
  --t-h2:    18px;
  --t-h3:    16px;
  --t-lead:  15px;
  --t-body:  14px;
  --t-sm:    13px;
  --t-xs:    12px;
  --t-2xs:   11px;
  --t-stat:  20px;

  /* ── Weights ──────────────────────────────────────────── */
  --w-reg: 400; --w-med: 500; --w-semi: 600;
  --w-bold:700; --w-xbold:800; --w-black:900;

  --lh-tight:1.1; --lh-snug:1.45; --lh-body:1.7;
}

/* ── Semantic type helpers ────────────────────────────────── */
.ds-hero      { font-size:var(--t-hero);  font-weight:var(--w-black); letter-spacing:-.8px; line-height:var(--lh-tight); color:var(--navy); }
.ds-h1        { font-size:var(--t-h1);   font-weight:var(--w-xbold); color:var(--tx); letter-spacing:-.2px; }
.ds-h2        { font-size:var(--t-h2);   font-weight:var(--w-xbold); color:var(--tx); }
.ds-h3,.ds-card-title { font-size:var(--t-h3); font-weight:var(--w-bold); color:var(--tx); line-height:var(--lh-snug); }
.ds-section-hd{ font-size:var(--t-lead); font-weight:var(--w-xbold); color:var(--tx); }
.ds-body      { font-size:var(--t-body); font-weight:var(--w-reg);   color:var(--tx); line-height:var(--lh-body); }
.ds-body-mu   { font-size:var(--t-sm);   color:var(--mu);            line-height:var(--lh-body); }
.ds-meta      { font-size:var(--t-xs);   color:var(--mu); }
.ds-label     { font-size:var(--t-xs);   font-weight:var(--w-xbold); color:var(--mu); letter-spacing:.3px; }
.ds-stat      { font-size:var(--t-stat); font-weight:var(--w-black); color:var(--p);  font-feature-settings:"tnum"; letter-spacing:-.3px; }
.ds-price     { color:var(--r);          font-weight:var(--w-xbold); }
.ds-wordmark  { font-family:var(--font-serif); font-weight:var(--w-bold); letter-spacing:-1px; }

/* ── Brand icon tile ──────────────────────────────────────── */
/* Usage: <span class="icon-tile"><img src="/static/icon/icon-home.png"></span> */
.icon-tile {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:22%; overflow:hidden; flex-shrink:0;
  background:linear-gradient(155deg,#fafdff 0%,#eaf3fc 55%,#dcebfa 100%);
  box-shadow:0 4px 12px rgba(26,111,196,.16), inset 0 1px 0 rgba(255,255,255,.9);
  border:1px solid rgba(26,111,196,.12);
}
.icon-tile::before {
  content:''; position:absolute; top:0; left:0; right:0; height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));
}
.icon-tile img {
  width:64%; height:64%; object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 2px 3px rgba(20,60,120,.18));
}
.icon-tile.is-blue img {
  filter:hue-rotate(200deg) saturate(.9) drop-shadow(0 2px 3px rgba(20,60,120,.18));
}
/* Larger variant for big category entry points */
.icon-tile-lg { width:72px; height:72px; }
.icon-tile-sm { width:40px; height:40px; }