/* ============================================================
   省钱搭子 BudgetBuddy — Color & Type Foundations
   Mobile-first personal finance assistant for students &
   young people in China. Warm, trustworthy, low-pressure.
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Production target uses the platform Chinese system stack
   (PingFang SC on iOS, Microsoft YaHei on Windows). For web
   previews we load Noto Sans SC as the closest open stand-in,
   plus Nunito for the friendly rounded ¥ numerals.
   SUBSTITUTION FLAG: real builds should ship PingFang SC /
   Source Han Sans; Noto Sans SC is the preview substitute.
---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=Nunito:wght@600;700;800&display=swap');

:root {
  /* ---------- Brand / Primary (soft blue = trust, security) ---- */
  --blue-50:  #EEF4FD;
  --blue-100: #D8E6FB;
  --blue-200: #B3CDF6;
  --blue-300: #84ABEC;
  --blue-400: #5E91E8;
  --blue-500: #4A86E8;  /* primary */
  --blue-600: #3A72D4;  /* primary pressed / hover */
  --blue-700: #2E5BB0;

  /* ---------- Green (savings progress, positive behavior) ------ */
  --green-50:  #E7F8F0;
  --green-100: #C9EFDE;
  --green-200: #97E2C0;
  --green-500: #2FC177;  /* positive */
  --green-600: #23A463;
  --green-700: #1B8550;

  /* ---------- Orange (reminders, friendly guidance) ------------ */
  --orange-50:  #FFF4E8;
  --orange-100: #FFE5C7;
  --orange-200: #FFCF95;
  --orange-500: #FF9A3D;  /* reminder */
  --orange-600: #F47E16;
  --orange-700: #D2680A;

  /* ---------- Red (warnings / overspending ONLY) -------------- */
  --red-50:  #FFEDEB;
  --red-100: #FFD4CF;
  --red-500: #F25C4A;  /* warning */
  --red-600: #DE4331;

  /* ---------- Warm neutrals (text, surfaces, lines) ---------- */
  --bg:        #FAF8F4;  /* app background — warm off-white */
  --surface:   #FFFFFF;  /* cards / sheets */
  --surface-2: #F4F1EB;  /* subtle inset / track */
  --ink-900:   #2B2A31;  /* primary text — warm near-black */
  --ink-700:   #54525C;  /* body secondary */
  --ink-500:   #8B8893;  /* tertiary / captions */
  --ink-300:   #BEBBC4;  /* placeholder / disabled */
  --line:      #ECE8E0;  /* hairline borders */
  --line-strong:#DED9CF;

  /* ---------- Semantic aliases ------------------------------- */
  --fg1: var(--ink-900);
  --fg2: var(--ink-700);
  --fg3: var(--ink-500);
  --primary: var(--blue-500);
  --primary-press: var(--blue-600);
  --positive: var(--green-500);
  --reminder: var(--orange-500);
  --warning: var(--red-500);
  --on-color: #FFFFFF;

  /* ---------- Radii (soft, friendly) ------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;   /* default card */
  --r-lg: 20px;   /* hero card / sheet */
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- Spacing (4px base) ----------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* ---------- Shadows (soft, warm, low) ---------------------- */
  --shadow-sm:   0 1px 2px rgba(43, 42, 49, 0.05);
  --shadow-card: 0 6px 18px rgba(80, 70, 55, 0.07);
  --shadow-float:0 10px 28px rgba(74, 134, 232, 0.22);
  --shadow-press:0 2px 6px rgba(43, 42, 49, 0.08);

  /* ---------- Type families ---------------------------------- */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
               "Source Han Sans SC", system-ui, sans-serif;
  --font-num:  "Nunito", "Noto Sans SC", system-ui, sans-serif; /* big ¥ figures */

  /* ---------- Motion ----------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 220ms;
}

/* ============================================================
   Semantic type scale (mobile-first). Sizes are tuned for
   small screens — body never below 14px, large readable CJK.
   ============================================================ */
:root {
  --t-display: 700 34px/1.15 var(--font-num);  /* hero ¥ amount  */
  --t-h1: 600 24px/1.3 var(--font-sans);       /* page title     */
  --t-h2: 600 18px/1.4 var(--font-sans);       /* section header */
  --t-h3: 500 16px/1.5 var(--font-sans);       /* card title     */
  --t-body: 400 16px/1.6 var(--font-sans);     /* default body   */
  --t-body-sm: 400 14px/1.55 var(--font-sans); /* secondary      */
  --t-caption: 400 12px/1.5 var(--font-sans);  /* meta / labels  */
  --t-num: 700 16px/1.3 var(--font-num);       /* inline amounts */
}

/* Optional utility classes (use vars directly where possible) */
.t-display { font: var(--t-display); letter-spacing: -0.01em; font-feature-settings: "tnum"; }
.t-h1 { font: var(--t-h1); color: var(--fg1); }
.t-h2 { font: var(--t-h2); color: var(--fg1); }
.t-h3 { font: var(--t-h3); color: var(--fg1); }
.t-body { font: var(--t-body); color: var(--fg1); }
.t-body-sm { font: var(--t-body-sm); color: var(--fg2); }
.t-caption { font: var(--t-caption); color: var(--fg3); }
.t-num { font: var(--t-num); font-feature-settings: "tnum"; }