/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  /* Colors */
  --color-bg: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-hover: #f1f5f9;
  --color-border: #e2e8f0;
  --color-text: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-accent: #dbeafe;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography */
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Borders */
  --border-width: 1px;
  --border-radius: 0.5rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.75rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Measure (optimal line length) */
  --measure: 65ch;
  --measure-narrow: 45ch;
  --measure-wide: 80ch;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg-secondary);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

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

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-bg-secondary);
  padding: 0.125rem 0.25rem;
  border-radius: var(--border-radius-sm);
}

/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

/* Stack - vertical rhythm */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-m));
}

.stack-xs > * + * { --stack-space: var(--space-xs); }
.stack-s > * + * { --stack-space: var(--space-s); }
.stack-m > * + * { --stack-space: var(--space-m); }
.stack-l > * + * { --stack-space: var(--space-l); }
.stack-xl > * + * { --stack-space: var(--space-xl); }
.stack-2xl > * + * { --stack-space: var(--space-2xl); }

/* Box - consistent padding */
.box {
  padding: var(--box-padding, var(--space-m));
  background: var(--box-bg, transparent);
  border: var(--box-border, none);
  border-radius: var(--box-radius, 0);
}

.box-s { --box-padding: var(--space-s); }
.box-m { --box-padding: var(--space-m); }
.box-l { --box-padding: var(--space-l); }
.box-xl { --box-padding: var(--space-xl); }

/* Center - horizontal centering with max-width */
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--center-measure, var(--measure));
  padding-inline: var(--center-gutter, var(--space-m));
}

.center-narrow { --center-measure: var(--measure-narrow); }
.center-wide { --center-measure: var(--measure-wide); }
.center-full { --center-measure: none; }

/* Cluster - horizontal grouping with wrapping */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-m));
  justify-content: var(--cluster-justify, flex-start);
  align-items: var(--cluster-align, center);
}

.cluster-start { --cluster-justify: flex-start; }
.cluster-center { --cluster-justify: center; }
.cluster-end { --cluster-justify: flex-end; }
.cluster-between { --cluster-justify: space-between; }

/* Sidebar - sidebar layout */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-m));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-min, 50%);
}

/* Auto Grid - responsive grid */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-m));
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-min, 250px), 1fr)
  );
}

/* Cover - full height with header/footer */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-height, 100vh);
  padding: var(--cover-padding, var(--space-m));
}

.cover > * {
  margin-block: var(--cover-spacing, var(--space-m));
}

.cover > :first-child:not([data-cover-center]) {
  margin-block-start: 0;
}

.cover > :last-child:not([data-cover-center]) {
  margin-block-end: 0;
}

.cover > [data-cover-center] {
  margin-block: auto;
}

/* ============================================
   COMPONENT STYLES
   ============================================ */

/* Card */
.card {
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-link:hover {
  text-decoration: none;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 9999px;
  background: var(--badge-bg, var(--color-accent));
  color: var(--badge-color, var(--color-primary));
}

.badge-primary {
  --badge-bg: var(--color-accent);
  --badge-color: var(--color-primary);
}

.badge-secondary {
  --badge-bg: var(--color-bg-secondary);
  --badge-color: var(--color-text-secondary);
}

/* Email thread */
.email-message {
  background: var(--color-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

.email-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block-end: var(--space-m);
  border-block-end: var(--border-width) solid var(--color-border);
}

.email-body {
  padding-block-start: var(--space-m);
  border-inline-start: 4px solid var(--color-border);
  padding-inline-start: var(--space-m);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.email-meta {
  padding-block-start: var(--space-m);
  border-block-start: var(--border-width) solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Navigation */
.nav-link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.nav-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Info panel */
.info-panel {
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: var(--space-l);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-hover { background-color: var(--color-bg-hover); }

.border { border: var(--border-width) solid var(--color-border); }
.border-b { border-block-end: var(--border-width) solid var(--color-border); }

.rounded { border-radius: var(--border-radius); }
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: 9999px; }

.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }

.transition { transition: all 0.2s; }

/* Prose - content styling */
.prose {
  max-inline-size: var(--measure);
}

.prose p { margin-block: var(--space-m); }
.prose h1, .prose h2, .prose h3 {
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-m);
  line-height: 1.2;
}
.prose ul, .prose ol {
  padding-inline-start: var(--space-l);
  margin-block: var(--space-m);
}