/* WINTEL Academic Design System — flattened stylesheet for deployment. */

/* ===== tokens/fonts.css ===== */
/* WINTEL Academic — Webfonts
   The template loads three families from Google Fonts:
   Inter (sans / UI + body), EB Garamond (serif / optional display),
   JetBrains Mono (mono / code, citation keys, metadata).
   These @import lines declare the webfonts shipped to consumers. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:wght@100..900&family=JetBrains+Mono:wght@100..800&display=swap');

/* ===== tokens/colors.css ===== */
/* WINTEL Academic — Color tokens
   The template is intentionally monochrome: the Tailwind `neutral` scale
   carries the whole UI (bg neutral-50, text neutral-900) in light mode,
   inverted for dark mode. We expose the raw scale plus semantic aliases.
   A single restrained accent — "signal blue" — is added for links and
   interactive emphasis (NOT in the original template; flagged in README). */

:root {
  /* ---- Neutral scale (Tailwind neutral) ---- */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;
  --white: #ffffff;

  /* ---- Accent: signal blue (sparing use) ---- */
  --signal-300: #93c5fd;
  --signal-500: #3b82f6;
  --signal-600: #2563eb;
  --signal-700: #1d4ed8;

  /* ---- Semantic: awards ---- */
  --gold: #c9a227;   /* best paper */
  --bronze: #b08d57; /* honorable mention */

  /* ---- Semantic aliases (light mode) ---- */
  --bg-page: var(--neutral-50);
  --surface-card: var(--white);
  --surface-muted: var(--neutral-100);
  --surface-header: rgba(250, 250, 250, 0.8); /* backdrop-blur header */

  --text-primary: var(--neutral-900);
  --text-body: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-50);

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);

  --link: var(--neutral-900);
  --link-decoration: var(--neutral-400);
  --accent: var(--signal-600);
  --accent-hover: var(--signal-700);

  --focus-ring: var(--neutral-950);
}

/* ---- Dark mode (template toggles `.dark` on a parent) ---- */
.dark {
  --dark-base: #002E3B;
  --bg-page: var(--dark-base);
  --surface-card: var(--dark-base);
  --surface-muted: #00222b;
  --surface-header: rgba(0, 46, 59, 0.3);

  --text-primary: var(--neutral-100);
  --text-body: var(--neutral-200);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--neutral-900);

  --border-default: var(--neutral-700);
  --border-strong: var(--neutral-600);

  --link: var(--neutral-50);
  --link-decoration: var(--neutral-600);
  --accent: var(--signal-500);
  --accent-hover: var(--signal-300);

  --focus-ring: var(--neutral-300);
}

/* ===== tokens/typography.css ===== */
/* WINTEL Academic — Typography tokens
   Inter drives the whole interface by default (fontStyle: "sans").
   EB Garamond is the optional serif voice; JetBrains Mono is for code,
   citation keys ([A94], [C77]) and dense metadata.
   Scale mirrors the template's Tailwind usage: name 4xl/semibold,
   section heads 2xl/semibold, body base, publication title base/medium. */

:root {
  /* ---- Families ---- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-serif: 'EB Garamond', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type scale (rem) ---- */
  --text-xs: 0.75rem;    /* 12px — metadata, footers */
  --text-sm: 0.875rem;   /* 14px — small buttons, captions */
  --text-base: 1rem;     /* 16px — body, publication titles */
  --text-lg: 1.125rem;   /* 18px — nav, lead-in */
  --text-xl: 1.25rem;    /* 20px — role, subsection heads */
  --text-2xl: 1.5rem;    /* 24px — section headings */
  --text-3xl: 1.875rem;  /* 30px — page titles */
  --text-4xl: 2.25rem;   /* 36px — name / hero */

  /* ---- Line heights ---- */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Tracking ---- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* ---- Semantic roles ---- */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-meta: var(--font-mono);
}

/* ===== tokens/spacing.css ===== */
/* WINTEL Academic — Spacing, radii, shadow, layout tokens
   Spacing follows Tailwind's 4px base step. The signature layout
   constraint is a single ~40rem reading column centered on the page,
   with a fixed blurred header above it. Cards are rounded-xl with a
   1px neutral border and a near-invisible hover shadow. */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 — gap between homepage sections */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 — bottom margin */
  --space-32: 8rem;    /* 128 — top offset under fixed header */

  /* ---- Radii ---- */
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;  /* buttons, inputs */
  --radius-lg: 0.5rem;    /* code blocks */
  --radius-xl: 0.75rem;   /* cards */
  --radius-full: 9999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Shadows (very restrained) ---- */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* ---- Layout ---- */
  --reading-column: 43.75rem;  /* 700px — the core content width */
  --page-inset: 2rem;       /* px-8 page gutter */
  --header-offset: 8rem;    /* mt-32 clearance under fixed header */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
}