/* docs/assets/base.css */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --text: #1f2937;          /* slate-800 */
  --muted: #6b7280;         /* gray-500 */
  --bg: #ffffff;
  --surface: rgba(255,255,255,0.92);

  --border: rgba(17,24,39,0.10);
  --shadow: 0 8px 24px rgba(17,24,39,0.10);

  --brand: #5A9BD4;
  --brand-ink: #0b2a3d;
  --brand-hover: #2f4156;

  --radius: 14px;
  --radius-sm: 10px;

  /* Sub-surfaces (slightly tinted, still glassy) */
  --surface-2: rgba(248, 250, 252, 0.92);     /* subtle cool slate */
  --surface-3: rgba(248, 250, 252, 0.72);     /* lighter for pill areas */

  /* Component-specific surfaces */
  --sidebar-bg: var(--surface-2);
  --nav-pill-bg: var(--surface-3);
  --nav-pill-border: rgba(15, 23, 42, 0.10);  
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global typography harmony */
h1, h2, h3 {
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 { font-size: clamp(2.0rem, 2.8vw, 3.0rem); line-height: 1.1; }
h2 { font-size: 1.6rem; line-height: 1.2; }
h3 { font-size: 1.15rem; line-height: 1.3; }

p, li {
  line-height: 1.6;
  color: var(--text);
}

a {
  color: var(--brand);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* A shared “card” feel you can reuse */
.hp-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Deep-link emphasis flash */
.haiphen-nav-flash{
  outline: 3px solid rgba(90,155,212,0.55);
  border-radius: 10px;
  background: rgba(255, 248, 176, 0.9);
  transition: background 1.6s ease, outline-color 1.6s ease;
}

/* Nice anchor landing behavior even without JS scrolling */
.haiphen-nav-target{
  scroll-margin-top: calc(var(--header-h, 70px) + 16px);
}

/* optional: highlight current page link */
.nav-links a.active {
  background: #ecf0f1;
  border-radius: 4px;
}