/* ============================================================
   Liu Zhi Academic Design System — colors & type tokens
   ------------------------------------------------------------
   Bilingual (zh-CN + en) academic homepage tokens.
   Anchored on NJTech crimson + ink navy.
   ============================================================ */

/* --- Web fonts (Google Fonts CDN) ----------------------------
   In-China deployment note: swap for self-hosted subsets or
   fall back to the system stack already in --font-sans-fallback.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&family=Noto+Serif+SC:wght@400;600;700;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&display=swap");

:root {
  /* ============================================================
     COLORS — raw scales
     ============================================================ */

  /* Ink / neutrals (cool gray) */
  --ink-900: #172033;   /* primary text */
  --ink-700: #334155;   /* secondary text, body copy in panels */
  --ink-500: #647084;   /* muted / tertiary */
  --ink-300: #dde3ed;   /* borders, dividers */
  --ink-200: #edf1f7;   /* portrait backplate, subtle fills */
  --ink-100: #f5f7fb;   /* page background */
  --ink-50:  #ffffff;   /* surface */

  /* Crimson (NJTech red, brand primary) */
  --crimson-700: #7a1626;   /* hover/pressed */
  --crimson-600: #9b1c31;   /* brand */
  --crimson-500: #c64159;   /* lighter accent (rarely used) */
  --crimson-100: #f8e9ec;   /* soft pink surface (chips bg) */
  --crimson-50:  #fdf6f7;   /* faintest wash */

  /* Ink navy (brand secondary) */
  --navy-800: #122140;      /* deepest */
  --navy-700: #20385f;      /* default — used for h-roles and email button */
  --navy-500: #3d5a86;      /* secondary accent */

  /* Functional / utility */
  --warm-overlay: rgba(155, 28, 49, 0.06);  /* page wash, crimson side */
  --cool-overlay: rgba(32, 56, 95, 0.08);   /* page wash, navy side */
  --shadow-rgb: 23, 32, 51;

  /* ============================================================
     COLORS — semantic
     ============================================================ */
  --bg:           var(--ink-100);
  --surface:      var(--ink-50);
  --surface-soft: rgba(255, 255, 255, 0.93);  /* panel over wash */
  --text:         var(--ink-900);
  --text-body:    var(--ink-700);
  --text-muted:   var(--ink-500);
  --line:         var(--ink-300);
  --line-soft:    rgba(221, 227, 237, 0.86);

  --brand:        var(--crimson-600);
  --brand-hover:  var(--crimson-700);
  --brand-soft:   var(--crimson-100);
  --ink-accent:   var(--navy-700);  /* alias used in roles below */

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm: 4px;
  --radius:    8px;     /* default — every panel, button, switch */
  --radius-pill: 999px; /* chips only */

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-card: 0 18px 46px rgba(var(--shadow-rgb), 0.08);
  --shadow-focus: 0 0 0 3px rgba(155, 28, 49, 0.25);

  /* ============================================================
     SPACING (8-pt grid)
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 32px;
  --space-7: 48px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --page-max: 1180px;
  --header-height: 58px;

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-serif:
    "Source Serif 4", "Noto Serif SC",
    "Songti SC", "STSong", Georgia, "Times New Roman", serif;

  --font-sans:
    "Inter", "Noto Sans SC",
    "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;

  --font-sans-fallback:
    "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;

  --font-mono:
    var(--font-sans);

  /* ============================================================
     TYPOGRAPHY — semantic roles (mostly font-size + weight)
     Use these in component CSS so the scale is centralized.
     ============================================================ */
  --fz-display: clamp(2.3rem, 4vw, 3.5rem); /* @kind font */
  --fz-h2: 1.65rem;
  --fz-h3: 1.15rem;
  --fz-role: 1.02rem;     /* "Associate Professor · MSc Supervisor" */
  --fz-body: 0.98rem;     /* summary copy */
  --fz-pub: 0.88rem;      /* publication list */
  --fz-meta: 0.82rem;     /* meta panel, chips, footer-ish */
  --fz-eyebrow: 0.76rem;
  --fz-foot: 0.78rem;

  --lh-tight: 1.08; /* @kind font */
  --lh-display: 0.96; /* @kind font */
  --lh-body: 1.5; /* @kind font */
  --lh-pub: 1.42; /* @kind font */

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-strong: 700; /* @kind font */
  --fw-bold: 800; /* @kind font */
  --fw-heavy: 850; /* @kind font */
}

/* ============================================================
   Element defaults — apply to a page that imports this file
   to get the brand baseline for free.
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  background:
    linear-gradient(135deg, var(--warm-overlay), transparent 30%),
    linear-gradient(315deg, var(--cool-overlay), transparent 38%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bilingual visibility — body[data-lang="zh-CN" | "en"] toggles */
body[data-lang="zh-CN"] [lang="en"],
body[data-lang="en"] [lang="zh-CN"] {
  display: none !important;
}

h1, h2, h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-strong);
  letter-spacing: 0;
}

h1 {
  font-size: var(--fz-display);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--fz-h2);
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fz-h3);
  line-height: 1.2;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--text); }

/* Eyebrow — small uppercase crimson label above section titles */
.eyebrow {
  margin: 0;
  color: var(--brand);
  font-family: var(--font-sans);
  font-size: var(--fz-eyebrow);
  font-weight: var(--fw-heavy);
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Focus ring — applied to anything interactive */
:where(button, a, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius);
}