/* ============================================================
   HJJ / 见远而行 — Design Tokens
   AI-Native Data Infrastructure · monochrome · engineering
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces (near-black, slightly cool) ---- */
  --bg:            #08090b;   /* page base */
  --bg-2:          #0c0d10;   /* sections */
  --surface:       #111317;   /* cards */
  --surface-2:     #15171c;   /* elevated / hover */
  --surface-3:     #1b1e24;

  /* ---- Lines ---- */
  --line:          rgba(255,255,255,0.07);
  --line-2:        rgba(255,255,255,0.12);
  --line-strong:   rgba(255,255,255,0.20);

  /* ---- Text (cool grays) ---- */
  --text:          #ededf0;
  --text-2:        #9ca0aa;
  --text-3:        #6b6f7a;
  --text-4:        #474b54;

  /* ---- Accent = white (monochrome focus) ---- */
  --accent:        #ffffff;
  --accent-soft:   rgba(255,255,255,0.92);
  --on-accent:     #08090b;

  /* faint signature glow for horizon / focus only */
  --glow:          rgba(255,255,255,0.55);

  /* ---- Signal = cool teal-cyan. Used ONLY for live/active/interactive feedback. ---- */
  --signal:        #32d6c6;
  --signal-2:      #5fe3d6;
  --signal-dim:    rgba(50,214,198,0.16);
  --signal-glow:   rgba(50,214,198,0.55);

  /* ---- Type ---- */
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Radius ---- */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* ---- Spacing rhythm ---- */
  --pad: clamp(20px, 5vw, 120px);   /* horizontal page gutter */
  --maxw: 1200px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.011em;
  font-feature-settings: "cv01", "ss01";
}

::selection { background: rgba(50,214,198,0.26); color: #fff; }

/* mono utility */
.mono {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}