/* Bundled CSS for tamssokari */

/* === tokens.css === */
/* ===================================
   DESIGN TOKENS
   Machine Aid Inc. Design System
   =================================== */

:root {
  /* ─────────────────────────────────
     SYSTEM FONT STACKS
     ───────────────────────────────── */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;

  /* ─────────────────────────────────
     SPACING SCALE (modular)
     ───────────────────────────────── */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.09vw, 0.56rem);
  --space-xs: clamp(0.75rem, 0.71rem + 0.19vw, 0.88rem);
  --space-s: clamp(1rem, 0.95rem + 0.28vw, 1.19rem);
  --space-m: clamp(1.5rem, 1.43rem + 0.37vw, 1.75rem);
  --space-l: clamp(2rem, 1.9rem + 0.47vw, 2.31rem);
  --space-xl: clamp(3rem, 2.86rem + 0.75vw, 3.5rem);
  --space-2xl: clamp(4rem, 3.81rem + 0.94vw, 4.69rem);
  --space-3xl: clamp(6rem, 5.71rem + 1.41vw, 7rem);

  /* ─────────────────────────────────
     TYPE SCALE
     ───────────────────────────────── */
  --text-xs: clamp(0.69rem, 0.66rem + 0.14vw, 0.78rem);
  --text-s: clamp(0.83rem, 0.8rem + 0.19vw, 0.96rem);
  --text-base: clamp(1rem, 0.95rem + 0.23vw, 1.15rem);
  --text-m: clamp(1.2rem, 1.14rem + 0.28vw, 1.38rem);
  --text-l: clamp(1.44rem, 1.37rem + 0.33vw, 1.66rem);
  --text-xl: clamp(1.73rem, 1.64rem + 0.42vw, 2rem);
  --text-2xl: clamp(2.07rem, 1.97rem + 0.52vw, 2.4rem);
  --text-3xl: clamp(2.49rem, 2.36rem + 0.61vw, 2.88rem);

  /* ─────────────────────────────────
     BORDER / LINE WEIGHTS
     ───────────────────────────────── */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;
  --border-heavy: 4px;

  /* ─────────────────────────────────
     MEASURE (line length)
     ───────────────────────────────── */
  --measure: 65ch;
  --measure-narrow: 45ch;
  --measure-wide: 75rem; /* ~1200px site container */

  /* ─────────────────────────────────
     FOCUS
     ───────────────────────────────── */
  --focus-offset: 2px;
}

/* === themes/tamssokari.css === */
/* ===================================
   THEME: Tamssokari
   Warm, earthy, architectural
   =================================== */

/* ─── LIGHT MODE (default) ─── */
[data-theme="tamssokari"],
[data-theme="tamssokari-light"],
.theme-tamssokari {
  --color-bg: #faf8f5;
  --color-bg-elevated: #ffffff;
  --color-bg-recessed: #f0ebe4;
  
  --color-text: #2d2a26;
  --color-text-muted: #736b62;
  --color-text-loud: #1a1816;
  
  --color-line: #c4b8a8;
  --color-line-strong: #8b7355;
  --color-line-subtle: #e4ddd3;
  
  --color-accent: #b45309;
  --color-accent-muted: #92400e;
  --color-accent-loud: #d97706;
  
  --color-highlight: #0f766e;
  --color-success: #15803d;
  --color-warning: #c2410c;
  --color-danger: #b91c1c;

  --titleblock-bg: var(--color-bg-elevated);
  --titleblock-border: var(--color-line-strong);
  --titleblock-text: var(--color-text);
  --titleblock-label: var(--color-text-muted);
  
  --frame-bg: var(--color-bg-elevated);
  --frame-border: var(--color-line-strong);
}

/* ─── DARK MODE ─── */
[data-theme="tamssokari-dark"],
.theme-tamssokari-dark {
  --color-bg: #1c1917;
  --color-bg-elevated: #292524;
  --color-bg-recessed: #0c0a09;
  
  --color-text: #e7e5e4;
  --color-text-muted: #a8a29e;
  --color-text-loud: #fafaf9;
  
  --color-line: #57534e;
  --color-line-strong: #a8a29e;
  --color-line-subtle: #44403c;
  
  --color-accent: #f59e0b;
  --color-accent-muted: #d97706;
  --color-accent-loud: #fbbf24;
  
  --color-highlight: #2dd4bf;
  --color-success: #22c55e;
  --color-warning: #fb923c;
  --color-danger: #f87171;

  --titleblock-bg: var(--color-bg-elevated);
  --titleblock-border: var(--color-line-strong);
  --titleblock-text: var(--color-text);
  --titleblock-label: var(--color-text-muted);
  
  --frame-bg: var(--color-bg-recessed);
  --frame-border: var(--color-line-strong);
}

/* === base.css === */
/* ===================================
   BASE STYLES
   Reset + foundational typography
   =================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-block-size: 100vh;
  line-height: 1.6;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

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

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

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* ─────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-mono);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-loud);
  text-transform: uppercase;
  text-wrap: balance;
  letter-spacing: 0.02em;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-l); }
h4 { font-size: var(--text-m); }

p {
  max-inline-size: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent-loud);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  padding: var(--space-m);
  background: var(--color-bg-recessed);
  border: var(--border-thin) solid var(--color-line);
  overflow-x: auto;
}

blockquote {
  padding-inline-start: var(--space-m);
  border-inline-start: var(--border-thick) solid var(--color-line-strong);
  color: var(--color-text-muted);
}

hr {
  border: none;
  border-block-start: var(--border-thin) solid var(--color-line);
  margin-block: var(--space-l);
}

/* ─────────────────────────────────
   FOCUS STYLES
   ───────────────────────────────── */
:focus-visible {
  outline: var(--border-medium) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

/* === primitives.css === */
/* ===================================
   EVERY LAYOUT PRIMITIVES
   Compositional layout patterns
   =================================== */

/* ─────────────────────────────────
   STACK
   Vertical rhythm with consistent spacing
   ───────────────────────────────── */
.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-s > * + * { margin-block-start: var(--space-s); }
.stack-m > * + * { margin-block-start: var(--space-m); }
.stack-l > * + * { margin-block-start: var(--space-l); }
.stack-xl > * + * { margin-block-start: var(--space-xl); }

/* ─────────────────────────────────
   BOX
   Padded container
   ───────────────────────────────── */
.box {
  padding: var(--box-padding, var(--space-m));
  border: var(--border-thin) solid var(--color-line, currentColor);
  outline: var(--border-thin) transparent;
  outline-offset: calc(var(--border-thin) * -1);
}

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

/* ─────────────────────────────────
   CENTER
   Horizontally centered container
   ───────────────────────────────── */
.center {
  box-sizing: content-box;
  max-inline-size: var(--center-measure, var(--measure));
  margin-inline: auto;
  padding-inline: var(--center-padding, var(--space-m));
}

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

/* ─────────────────────────────────
   CLUSTER
   Horizontally grouped items
   ───────────────────────────────── */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-space, var(--space-s));
  justify-content: var(--cluster-justify, flex-start);
  align-items: var(--cluster-align, center);
}

/* ─────────────────────────────────
   SIDEBAR
   Two-panel layout with one flexible
   ───────────────────────────────── */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-m));
}

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

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

/* ─────────────────────────────────
   SWITCHER
   Responsive row/column switch
   ───────────────────────────────── */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-m));
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* ─────────────────────────────────
   COVER
   Vertically centered hero
   ───────────────────────────────── */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-height, 100vh);
  padding: var(--cover-padding, var(--space-m));
}

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

.cover > :first-child:not(.cover-centered) {
  margin-block-start: 0;
}

.cover > :last-child:not(.cover-centered) {
  margin-block-end: 0;
}

.cover > .cover-centered {
  margin-block: auto;
}

/* ─────────────────────────────────
   GRID
   Auto-fit responsive grid
   ───────────────────────────────── */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-m));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 15rem), 100%), 1fr)
  );
}

/* ─────────────────────────────────
   FRAME
   Aspect ratio container
   ───────────────────────────────── */
.frame {
  aspect-ratio: var(--frame-ratio, 16 / 9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────
   REEL
   Horizontal overflow scroll
   ───────────────────────────────── */
.reel {
  display: flex;
  gap: var(--reel-gap, var(--space-m));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--color-line) var(--color-bg-recessed);
}

.reel > * {
  flex: 0 0 var(--reel-item-width, auto);
}

/* === blocks.css === */
/* ===================================
   BLOCKS (CUBE CSS)
   Component-specific styles
   =================================== */

/* ─────────────────────────────────
   SITE FRAME
   Architectural drawing border
   Intrinsic sizing - no media queries
   ───────────────────────────────── */
.site-frame {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding: clamp(2px, 1vw, var(--space-xs));
  background: var(--frame-bg);
}

.site-frame__border {
  min-block-size: calc(100dvh - clamp(4px, 2vw, var(--space-s)));
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  outline: var(--border-thick) solid var(--frame-border);
  outline-offset: calc(-1 * var(--border-thick));
}

.site-frame__titleblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-2xs) var(--space-m);
  border-block-end: var(--border-medium) solid var(--frame-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.site-frame__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.site-frame__field {
  white-space: nowrap;
}

.site-frame__field .site-frame__label {
  color: var(--color-text-muted);
}

.site-frame__field .site-frame__value {
  color: var(--color-text);
}

/* Separator between fields */
.site-frame__separator {
  color: var(--color-line);
}

.site-frame__label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-inline-end: var(--space-3xs);
}

.site-frame__value {
  color: var(--color-text);
}

.site-frame__controls {
  display: flex;
  align-items: center;
}

.site-frame__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-inline-size: 0; /* Allow content to shrink */
}

/* Theme toggle button */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  min-inline-size: 7ch;
  padding: 0;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.theme-toggle > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.theme-toggle > span[data-hidden="true"] {
  visibility: hidden;
}

.theme-toggle:hover {
  color: var(--color-text-loud);
  background: var(--color-bg-elevated);
}

/* ─────────────────────────────────
   TITLE BLOCK
   Architectural drawing style header
   ───────────────────────────────── */
.title-block {
  background: var(--titleblock-bg);
  font-family: var(--font-mono);
  outline: var(--border-thick) solid var(--titleblock-border);
  outline-offset: calc(-1 * var(--border-thick));
}

.title-block__inner {
  display: block;
  border-block-start: var(--border-thin) solid var(--titleblock-border);
}

.title-block__header {
  padding: var(--space-m);
  border-block-end: var(--border-medium) solid var(--titleblock-border);
}

.title-block__title {
  font-size: var(--text-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--titleblock-text);
  margin: 0;
  text-wrap: balance;
}

.title-block__subtitle {
  font-size: var(--text-s);
  color: var(--titleblock-label);
  margin-block-start: var(--space-2xs);
  text-wrap: balance;
}

.title-block__main {
  padding: var(--space-m);
  border-block-end: var(--border-thin) solid var(--titleblock-border);
  overflow-wrap: break-word;
  word-break: break-word;
}

.title-block__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.title-block__field {
  padding: var(--space-s) var(--space-m);
  border-block-end: var(--border-thin) solid var(--titleblock-border);
  border-inline-start: var(--border-thin) solid var(--titleblock-border);
}

.title-block__field:first-child {
  border-inline-start: none;
}

.title-block__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--titleblock-label);
}

.title-block__value {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--titleblock-text);
}

/* ─────────────────────────────────
   SITE HEADER
   Intrinsic reflow layout
   ───────────────────────────────── */
.site-header {
  border-block-end: var(--border-thick) solid var(--color-line-strong);
  padding-block: var(--space-2xs);
}

.site-header__inner,
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}

.site-header__inner {
  justify-content: space-between;
}

.site-footer__nav {
  justify-content: space-between;
  inline-size: 100%;
}

.site-header__inner .site-logo,
.site-footer__nav .site-logo {
  flex: 0 1 auto;
}

.site-header__inner .site-nav,
.site-footer__nav .site-nav {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-inline-size: 0;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: var(--color-text-loud);
}

.site-logo:hover {
  color: var(--color-accent);
}

.site-logo__mark {
  block-size: 1.5rem;
  inline-size: auto;
  vertical-align: middle;
}

.site-logo__text {
  font-family: var(--font-mono);
  font-size: var(--text-m);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-2xs) var(--space-s);
}


.site-nav a {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color-text-muted);
  padding-block: var(--space-2xs);
  border-block-end: var(--border-medium) solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-text-loud);
  border-color: var(--color-accent);
}

.site-nav__rss {
  border-block-end: none;
  align-self: center;
}

.site-nav__rss svg {
  inline-size: 1em;
  block-size: 1em;
  display: block;
}

/* ─────────────────────────────────
   SITE FOOTER
   ───────────────────────────────── */
.site-footer {
  border-block-start: var(--border-thick) solid var(--color-line-strong);
  padding-block: var(--space-m);
  margin-block-start: auto;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--text-s);
  color: var(--color-text-muted);
}

.site-footer__nav .site-nav {
  margin-inline-start: 0;
}

.site-footer__nav .site-logo {
  justify-content: flex-start;
}

.site-footer__nav .site-nav a {
  padding-block: 0;
}

.site-footer__copyright {
  text-align: center;
}

@media (max-width: 48rem) {
  .site-header__inner,
  .site-footer__nav {
    justify-content: center;
  }

  .site-header__inner .site-logo,
  .site-footer__nav .site-logo {
    justify-content: center;
  }

  .site-header__inner .site-nav,
  .site-footer__nav .site-nav {
    flex-basis: 100%;
    justify-content: center;
  }
}

/* ─────────────────────────────────
   POST CARD
   Blog post preview in title block style
   ───────────────────────────────── */
.post-card {
  background: var(--color-bg-elevated);
  outline: var(--border-medium) solid var(--color-line);
  outline-offset: calc(-1 * var(--border-medium));
  transition: outline-color 0.15s ease;
  overflow: hidden;
  max-inline-size: 100%;
}

.post-card:hover {
  outline-color: var(--color-line-strong);
}

.post-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-card__header {
  padding: var(--space-s) var(--space-m);
  border-block-end: var(--border-thin) solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xs) var(--space-s);
}

.post-card__number {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

.post-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.post-card__body {
  padding: var(--space-m);
}

.post-card__title {
  font-size: var(--text-m);
  margin-block-end: var(--space-xs);
  overflow-wrap: break-word;
  word-break: break-word;
}

.post-card__excerpt {
  font-size: var(--text-s);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ─────────────────────────────────
   PROSE
   Long-form content styling
   ───────────────────────────────── */
.prose {
  overflow-wrap: break-word;
  word-break: break-word;
}

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

.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + * {
  margin-block-start: var(--space-s);
}

.prose h2 {
  margin-block-start: var(--space-xl);
  padding-block-end: var(--space-2xs);
  border-block-end: var(--border-thin) solid var(--color-line);
}

.prose ul, .prose ol {
  padding-inline-start: var(--space-l);
}

.prose li + li {
  margin-block-start: var(--space-xs);
}

/* ─────────────────────────────────
   DRAWING FRAME
   Blueprint-style border container
   ───────────────────────────────── */
.drawing-frame {
  border: var(--border-thick) solid var(--color-line-strong);
  padding: var(--space-2xs);
}

.drawing-frame__inner {
  border: var(--border-thin) solid var(--color-line);
  padding: var(--space-m);
}

/* ─────────────────────────────────
   BUTTON
   ───────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--color-text-loud);
  background: transparent;
  border: none;
  outline: var(--border-medium) solid var(--color-line-strong);
  outline-offset: calc(-1 * var(--border-medium));
  cursor: pointer;
  transition: all 0.15s ease;
  max-inline-size: 100%;
  word-break: break-word;
}

.button:hover {
  background: var(--color-line-strong);
  color: var(--color-bg);
}

.button--primary {
  background: var(--color-accent);
  outline-color: var(--color-accent);
  color: var(--color-bg);
}

.button--primary:hover {
  background: var(--color-accent-loud);
  outline-color: var(--color-accent-loud);
}

.button-outline {
  background: transparent;
}

.button-sm {
  padding: var(--space-2xs) var(--space-s);
  font-size: var(--text-xs);
}

/* ─────────────────────────────────
   FORM INPUT
   Text inputs, textareas
   ───────────────────────────────── */
.input {
  inline-size: 100%;
  padding: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-s);
  border: var(--border-thin) solid var(--color-line);
  background: var(--color-bg);
}

.input:focus {
  outline: var(--border-medium) solid var(--color-accent);
  outline-offset: var(--focus-offset);
}

textarea.input {
  resize: vertical;
}

/* ─────────────────────────────────
   LABEL
   Architectural-style label text
   ───────────────────────────────── */
.label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

/* === code.css === */
/* ===================================
   CODE SYNTAX HIGHLIGHTING
   Uses Prism.js classes from @11ty/eleventy-plugin-syntaxhighlight
   =================================== */

.code-block {
  padding: var(--space-m);
  border-radius: var(--radius-s);
  overflow-x: auto;
  font-size: var(--step--1);
  line-height: 1.5;
  background: var(--color-bg-recessed);
  border: var(--border-thin) solid var(--color-line);
}

/* Inline code */
code:not([class*="language-"]) {
  padding: 0.125em 0.25em;
  border-radius: var(--radius-xs);
  background: var(--color-bg-recessed);
  font-size: 0.9em;
}

/* Token colors - works with both themes */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--color-text-muted);
}

.token.punctuation {
  color: var(--color-text);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: var(--color-accent);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--color-success);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--color-warning);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--color-accent-loud);
}

.token.function,
.token.class-name {
  color: var(--color-highlight);
}

.token.regex,
.token.important,
.token.variable {
  color: var(--color-warning);
}

/* === utilities.css === */
/* ===================================
   UTILITIES (CUBE CSS)
   Single-purpose helper classes
   =================================== */

/* Text alignment */
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }

/* Font families */
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }

/* Font sizes */
.text-xs { font-size: var(--text-xs); }
.text-s { font-size: var(--text-s); }
.text-base { font-size: var(--text-base); }
.text-m { font-size: var(--text-m); }
.text-l { font-size: var(--text-l); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Font weight */
.weight-normal { font-weight: 400; }
.weight-medium { font-weight: 500; }
.weight-bold { font-weight: 700; }

/* Colors */
.color-text { color: var(--color-text); }
.color-muted { color: var(--color-text-muted); }
.color-loud { color: var(--color-text-loud); }
.color-accent { color: var(--color-accent); }

/* Background */
.bg-base { background-color: var(--color-bg); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-recessed { background-color: var(--color-bg-recessed); }

/* Borders */
.border { border: var(--border-thin) solid var(--color-line); }
.border-strong { border: var(--border-medium) solid var(--color-line-strong); }
.border-block-start { border-block-start: var(--border-thin) solid var(--color-line); }
.border-block-end { border-block-end: var(--border-thin) solid var(--color-line); }

/* Spacing */
.pad-s { padding: var(--space-s); }
.pad-m { padding: var(--space-m); }
.pad-l { padding: var(--space-l); }
.pad-xl { padding: var(--space-xl); }

.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }

/* Display */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* Region spacing */
.region {
  padding-block: var(--region-space, var(--space-xl));
}

.region-l {
  --region-space: var(--space-2xl);
}

/* Margin block utilities */
.mt-m { margin-block-start: var(--space-m); }
.mt-l { margin-block-start: var(--space-l); }
.mt-xl { margin-block-start: var(--space-xl); }
.mt-2xl { margin-block-start: var(--space-2xl); }

/* Flex utilities */
.justify-between { justify-content: space-between; }

/* ===================================
   PRINT STYLES
   =================================== */

@media print {
  /* Reset to print-friendly colors */
  :root {
    --color-bg: #fff;
    --color-text: #000;
    --color-text-muted: #333;
    --color-line: #ccc;
  }

  /* Hide non-essential elements */
  .theme-toggle,
  .site-nav,
  .site-footer {
    display: none;
  }

  /* Simplify site frame for print */
  .site-frame {
    border: none;
    padding: 0;
  }

  .site-frame__border {
    border: 1pt solid #000;
  }

  .site-frame__titleblock {
    border-bottom: 1pt solid #000;
    background: none;
  }

  /* Ensure links show URLs */
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  /* Page break control */
  h1, h2, h3 {
    break-after: avoid;
  }

  pre, blockquote, figure {
    break-inside: avoid;
  }

  /* Ensure good contrast */
  body {
    background: #fff;
    color: #000;
  }
}