/* Swiss Atelier 1.1.0 — generated; edit tokens.json and styles/atelier.css. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Geist+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@400..600&family=Literata:ital,opsz,wght@0,7..72,400..600;1,7..72,400..600&display=swap');

:root {
  --bg-paper: #F4F4F6;
  --bg-surface: #FFFFFF;
  --bg-subtle: #E4E4E7;
  --ink-primary: #141413;
  --ink-secondary: #292524;
  --ink-muted: #57534E;
  --accent-primary: #D9381E;
  --accent-secondary: #0F766E;
  --accent-soft: #FFEDD5;
  --teal-soft: #CCFBF1;
  --syn-keyword: #B91C1C;
  --syn-type: #0F766E;
  --syn-fn: #1D4ED8;
  --syn-const: #B45309;
  --syn-string: #15803D;
  --syn-attr: #6D28D9;
  --syn-comment: #78716C;
  --syn-punct: #57534E;
  --border-color: #CBD5E1;
  --border-strong: #94A3B8;
  --border-width: 1px;
  --radius-box: 4px;
  --shadow-box: none;
  --font-display: Fraunces, Georgia, serif;
  --heading-weight: 500;
  --heading-tracking: -0.02em;
  --font-body: Literata, Georgia, serif;
  --body-weight: 440;
  --body-size: 0.98rem;
  --body-lh: 1.68;
  --body-tracking: -0.005em;
  --font-ui: Geist, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --diagram-grid: 4px;
  --ink-focal: #B82D16;
  --ink-positive: #0D635C;
  --ink-code: #57534E;
}

/* Base Reset & Page Defaults */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body, .atelier-page {
  margin: 0;
  padding: 0;
  background-color: var(--bg-paper);
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
}

/* Typography Classes */
.font-display, .atelier-h1, .atelier-h2, .atelier-h3 {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  color: var(--ink-primary);
}

.atelier-h1 {
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  line-height: 1.1;
  margin: 0 0 0.75rem 0;
}

.atelier-h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  line-height: 1.18;
  margin: 0 0 0.5rem 0;
}

.atelier-h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 0.4rem 0;
}

.font-body, .atelier-prose {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  letter-spacing: var(--body-tracking);
  color: var(--ink-secondary);
}

.atelier-prose {
  max-width: 66ch;
}

.font-ui, .atelier-ui {
  font-family: var(--font-ui);
  letter-spacing: -0.005em;
}

.font-mono-code, .atelier-mono {
  font-family: var(--font-mono);
  letter-spacing: 0em;
}

/* Quiet Hairline Surfaces */
.surface-card, .atelier-card {
  background-color: var(--bg-surface);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-box);
}

.surface-well, .atelier-well {
  background-color: var(--bg-subtle);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-box);
}

/* Semantic Callouts */
.callout-focal, .atelier-callout-focal {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 4px 4px 0;
  padding: 1rem;
}

.callout-verified, .atelier-callout-verified {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-secondary);
  border-radius: 0 4px 4px 0;
  padding: 1rem;
}

.callout-note, .atelier-callout-note {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--ink-muted);
  border-radius: 0 4px 4px 0;
  padding: 1rem;
}

/* Semantic Badges & Inline Code */
.badge-orange, .atelier-badge-orange {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background-color: var(--accent-soft);
  color: var(--ink-focal);
  border: 1px solid var(--accent-primary);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

.badge-teal, .atelier-badge-teal {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background-color: var(--teal-soft);
  color: var(--ink-positive);
  border: 1px solid var(--accent-secondary);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

.badge-neutral, .atelier-badge-neutral {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  background-color: var(--bg-subtle);
  color: var(--ink-muted);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}

.inline-code, .atelier-code-inline {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background-color: var(--bg-subtle);
  color: var(--ink-primary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 1px 5px;
}

.inline-code-focal, .atelier-code-focal {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background-color: var(--accent-soft);
  color: var(--ink-focal);
  border: 1px solid #FDBA74;
  border-radius: 3px;
  padding: 1px 5px;
}

/* Syntax Highlighting Token Classes */
.syn-kw { color: var(--syn-keyword); font-weight: 600; }
.syn-ty { color: var(--syn-type); font-weight: 500; }
.syn-fn { color: var(--syn-fn); font-weight: 500; }
.syn-cn { color: var(--syn-const); font-weight: 500; }
.syn-st { color: var(--syn-string); }
.syn-at { color: var(--syn-attr); font-weight: 500; }
.syn-cm { color: var(--syn-comment); font-style: italic; }
.syn-op { color: var(--syn-punct); }
.syn-ln {
  display: inline-block;
  width: 2.25rem;
  padding-right: 0.75rem;
  margin-right: 0.75rem;
  text-align: right;
  color: #94A3B8;
  border-right: 1px solid #E4E4E7;
  user-select: none;
  -webkit-user-select: none;
}

.atelier-code-line {
  display: block;
  padding: 2px 16px;
  white-space: pre;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
}

.atelier-code-line-focal {
  background-color: rgba(255, 237, 213, 0.75);
  border-left: 2px solid var(--accent-primary);
}

.atelier-code-line-verified {
  background-color: rgba(204, 251, 241, 0.75);
  border-left: 2px solid var(--accent-secondary);
}

/* Tables */
.atelier-table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.atelier-table th {
  background-color: var(--bg-subtle);
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--ink-primary);
}

.atelier-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.75rem 1rem;
  color: var(--ink-secondary);
}

/* TOC Links */
.toc-link {
  transition: all 0.15s ease;
  border-left: 2px solid transparent;
}
.toc-link:hover {
  color: var(--ink-primary);
  border-left-color: var(--border-strong);
}
.toc-link.active {
  color: var(--ink-focal);
  font-weight: 600;
  border-left-color: var(--accent-primary);
  background-color: rgba(217, 56, 30, 0.05);
}

/* Keyboard and narrow-screen access */
:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.atelier-code-line { min-width: max-content; }
.atelier-code-line-focal, .atelier-code-line-verified { padding-left: 14px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .75rem; background: white; }
.skip-link:focus { top: 1rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Preserve readable comment contrast on tinted code lines. */
.atelier-code-line-focal .syn-cm,
.atelier-code-line-verified .syn-cm,
[class*="bg-[#FFEDD5]"] .syn-cm,
[class*="bg-[#CCFBF1]"] .syn-cm { color: var(--ink-code); }

/* Complex figures keep readable type rather than shrinking to the viewport. */
.atelier-diagram-scroll { overflow-x: auto; max-width: 100%; }
.atelier-diagram { display: block; width: 100%; min-width: 960px; height: auto; font-family: var(--font-ui); font-size: 14px; }
.atelier-diagram text { fill: var(--ink-secondary); }
.atelier-diagram .diagram-focal { fill: var(--ink-focal); }
.atelier-diagram .diagram-positive { fill: var(--ink-positive); }
.atelier-diagram .diagram-heading { font-size: 18px; font-weight: 600; }
.atelier-diagram .diagram-meta { font-family: var(--font-mono); }