/* ════════════════════════════════════════════════════════════════
   base.css — the design system foundation, loaded first on every page.
   Fonts, design tokens, reset and document defaults.

   Load order on every page:
     base.css → site.css → profile.css | case-study.css → pages/<page>.css
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts ──
   Geist Sans (body, headings) from Fontsource; from Google Fonts
   (linked in each page's <head>): Inter (UI labels, nav, numbers),
   IBM Plex Mono (small meta lines) and VT323 (the "Coded and designed
   by Alaa" credit). */
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-500-normal.woff2) format('woff2');
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-600-normal.woff2) format('woff2');
}
@font-face {
  font-family: "Geist Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/geist-sans@latest/latin-700-normal.woff2) format('woff2');
}

/* ── Design tokens ── */
:root {
  color-scheme: light;

  /* Colour — five core tokens. Everything else is an alias of these. */
  --page: #ffffff;              /* page background */
  --text: #666666;              /* body copy */
  --muted: rgba(0, 0, 0, 0.6);  /* labels, meta, secondary UI */
  --soft: #e4e4e4;              /* borders, dividers, hover fills */
  --strong: #000000;            /* headings, emphasis, inverted fills */
  --hairline: #f0f0f0;          /* very light dividers: sidebar edge, card outlines */

  /* Semantic aliases (prefer these in new CSS) */
  --bg: var(--page);
  --text-primary: var(--strong);
  --text-secondary: var(--text);
  --text-muted: var(--muted);
  --border: var(--soft);

  /* Legacy aliases still used by older selectors */
  --ink: var(--strong);
  --paper: var(--page);
  --stone: var(--text);
  --line: var(--soft);

  /* Layout — the left sidebar is 48 + 248 + 40 = 336px on every page */
  --sidebar-left: 48px;         /* sidebar's own left padding */
  --sidebar-width: 248px;       /* sidebar content width */
  --divider-gap: 40px;          /* sidebar's right padding, before its border */
  --sidebar-inset-y: 48px;      /* sidebar top/bottom padding */
  --sidebar-total: calc(var(--sidebar-left) + var(--sidebar-width) + var(--divider-gap));  /* 336px */

  /* Motion — the chat panel opening/closing and everything it pushes */
  --panel-duration: 420ms;
  --panel-ease: cubic-bezier(0.45, 0, 0.2, 1);   /* gentle ease-in-out, no overshoot */
}

/* ── Reset + document defaults ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  font-family: "Geist Sans", "Inter", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Page transitions ──
   Clicking between pages crossfades instead of flashing white (CSS
   cross-document View Transitions; browsers without support just
   navigate normally). The sidebar is its own layer (see .sidebar in
   site.css) so it morphs in place; the rest of the old page fades out
   and the new one rises in slightly. Off for reduced-motion users. */
@view-transition { navigation: auto; }
::view-transition-group(*) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) { animation: 180ms ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 360ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both vt-rise-in; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}