/* ==========================================================================
   Shisir Acharya Portfolio — Typography System
   Editorial Swiss Graphic Hierarchy: Plus Jakarta Sans + Newsreader + JetBrains Mono
   ========================================================================== */

:root {
  /* Font Families */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* Type Scale (Fluid clamp & proportional steps) */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);     /* 11-13px - Metadata, Colophon, Tags */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9rem);   /* 13-14.5px - Captions, Secondary labels */
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); /* 15-17px - Body readability */
  --text-md: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);    /* 17-20px - Subheadings, Lead body */
  --text-lg: clamp(1.25rem, 1.15rem + 0.6vw, 1.625rem);   /* 20-26px - Project titles, Section heads */
  --text-xl: clamp(1.625rem, 1.45rem + 1vw, 2.25rem);     /* 26-36px - Editorial quotes, Major titles */
  --text-2xl: clamp(2.25rem, 1.95rem + 1.8vw, 3.5rem);    /* 36-56px - Hero sub-statements */
  --text-display: clamp(3rem, 2.4rem + 3.8vw, 6.25rem);    /* 48-100px - Editorial hero headline */

  /* Line Heights */
  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.45;
  --lh-relaxed: 1.68;

  /* Letter Spacing */
  --ls-display: -0.04em;
  --ls-tight: -0.02em;
  --ls-normal: -0.005em;
  --ls-wide: 0.05em;
  --ls-mono: 0.08em;
  --ls-tag: 0.12em;
}

/* Base Typographic Resets */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

h1 {
  font-size: var(--text-display);
  letter-spacing: var(--ls-display);
  font-weight: 800;
}

h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 600;
}

h4 {
  font-size: var(--text-lg);
  font-weight: 600;
}

/* Editorial Serif Accents */
.font-serif {
  font-family: var(--font-serif);
}

.italic {
  font-style: italic;
}

.editorial-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Monospace & Technical Labels */
.font-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--ls-mono);
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-tag);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tech-tag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent);
}

/* Selection */
::selection {
  background-color: var(--accent);
  color: #FFFFFF;
}