@import url(fonts/fonts.css);

:root {
  color-scheme: light;

  --canvas: #f5f7fa;
  --surface: #ffffff;
  --sunken: #f3f5f9;
  --ink: #141a26;
  --ink-2: #4a5264;
  --ink-3: #666e80;
  --ink-lead: #7c8496;
  --ink-4: #a3aab8;
  --line: #eef1f5;
  --line-2: #e3e7ee;
  --line-3: #d3d9e3;
  --white: #ffffff;

  --green: #0fcf92;
  --green-2: #13b2cc;
  --on-green: #04291c;
  --brand: #08805c;
  --yellow: #fccd01;
  --brand-soft: #c6e8ee;
  --wash: rgba(15, 207, 146, .07);
  --grad: linear-gradient(90deg, var(--green), var(--green-2));
  --grad-text: linear-gradient(90deg, #07a571, #0b8fa8);
  --tint-1: #e7f9f1;
  --tint-2: #e5f6f9;
  --tint: linear-gradient(135deg, var(--tint-1), var(--tint-2));

  --ok: #12a869;   --ok-bg: #e8f7ef;   --ok-ink: #0b7a4b;
  --warn: #f0a020; --warn-bg: #fff5e3; --warn-ink: #8f5600;
  --wait: #f5b800; --wait-bg: #fff8e1; --wait-ink: #7a5a00;
  --hot: #f5484a;
  --danger: #d92d20; --danger-bg: #fdecec; --danger-ink: #b42318;

  --glow-1: rgba(16, 214, 155, .22);
  --glow-2: rgba(19, 178, 204, .18);
  --glow-3: rgba(47, 91, 255, .07);
  --dots: rgba(20, 26, 38, .16);

  --shadow-card: none;
  --shadow-lift: 0 10px 28px -14px rgba(20, 26, 38, .22);
  --shadow-pop: 0 0 0 1px var(--line-2), 0 18px 44px -18px rgba(20, 26, 38, .30);
  --shadow-primary: 0 10px 22px -12px rgba(15, 207, 146, .75);
  --ring: 0 0 0 1px var(--brand), 0 0 0 4px rgba(15, 207, 146, .22);

  --r-card: 16px;
  --r-modal: 20px;
  --r-input: 12px;
  --r-btn: 10px;
  --r-pill: 999px;
  --r-icon: 10px;

  --sans: 'TikTok Sans', 'PingFang SC', 'Noto Sans SC', 'Source Han Sans SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', system-ui, sans-serif;
  --num: 'Barlow', 'TikTok Sans', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --mono: 'Barlow', 'TikTok Sans', ui-monospace, monospace;
  --fs-hero: 42px;
  --fs-title: 30px;
  --fs-h2: 20px;
  --fs-card: 15px;
  --fs-body: 14px;
  --fs-note: 13px;
  --fs-cap: 12px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --t-micro: .18s;
  --t-open: .3s;
  --t-reveal: .5s;

  --page-max: 1240px;
  --gx: 32px;
  --rail: 352px;
  --side: 232px;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  :root { --gx: 16px; --fs-hero: 36px; --fs-title: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}