/*
 * mechanikon.css — shared design tokens for the Mechanikon site.
 *
 * Loaded by every mechanism. Exposes colour, typography, spacing, and
 * a small base reset as CSS custom properties. Mechanisms compose on
 * top; they do not redefine tokens.
 *
 * Palette names follow the Antikythera build that already ships.
 */

:root {
  /* ---- Colour ---- */
  --bg:          #0a0a0a;   /* deep ink — page background                      */
  --panel:       #15140f;   /* panel surface — headers, controls, drawers      */
  --panel-2:     #1a1810;   /* slightly lighter panel — buttons, picker cells  */
  --panel-3:     #1f1d15;   /* slightly lighter still — form controls          */
  --ink:         #e8e4d6;   /* body text on dark                               */
  --ink-dim:     #908a78;   /* secondary text, captions, labels                */
  --paper:       #d4c9a8;   /* aged parchment — dials, scales, emphasised text */
  --bronze:      #c9a227;   /* muted-gold accent — the Mechanikon signature    */
  --pointer:     #8b2500;   /* oxblood — pointers, critical markers            */
  --border:      #2a2820;   /* muted border on dark                            */

  /* Semantic aliases — prefer these in new code                              */
  --accent:      var(--bronze);
  --surface:     var(--panel);
  --surface-alt: var(--panel-2);
  --text:        var(--ink);
  --text-mute:   var(--ink-dim);
  --text-emph:   var(--paper);

  /* Status colours (used sparingly)                                           */
  --ok:          #6db86d;
  --err:         #d96b5e;
  --warn:        var(--bronze);

  /* ---- Typography ---- */
  --font-serif:  "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   13px;
  --fs-base: 14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  28px;
  --fs-3xl:  40px;

  --lh-tight: 1.2;
  --lh-body:  1.55;
  --lh-prose: 1.7;

  /* ---- Spacing (4-px scale) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Chrome heights (see strategy §5 shell layout) ---- */
  --chrome-header-h: 48px;
  --chrome-footer-h: 40px;

  /* ---- Layout ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --prose-width: 68ch;

  /* ---- Motion ---- */
  --dur-fast:   120ms;
  --dur-med:    240ms;
  --dur-slow:   480ms;
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Base reset (minimal — mechanisms extend) ---- */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Prose — used inside essays, teaching content                                */
.prose {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-prose);
  color: var(--text);
  max-width: var(--prose-width);
}
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-sans);
  color: var(--text-emph);
  line-height: var(--lh-tight);
}
.prose h1 { font-size: var(--fs-3xl); margin: var(--sp-8) 0 var(--sp-4); }
.prose h2 { font-size: var(--fs-2xl); margin: var(--sp-8) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-xl);  margin: var(--sp-6) 0 var(--sp-2); }
.prose h4 { font-size: var(--fs-lg);  margin: var(--sp-5) 0 var(--sp-2); color: var(--text); }
.prose p  { margin: 0 0 var(--sp-4); }
.prose a  { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
}
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: 0 var(--sp-4);
  border-left: 2px solid var(--accent);
  color: var(--text-emph);
  font-style: italic;
}

/* Site chrome — shared header and footer structure                             */
.mechanikon-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--chrome-header-h);
  padding: 0 var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md);
}
.mechanikon-header .brand {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: var(--fs-lg);
}
.mechanikon-header .brand:hover { border-bottom-color: transparent; }
.mechanikon-header nav {
  display: flex;
  gap: var(--sp-4);
  margin-left: auto;
  color: var(--text-mute);
}
.mechanikon-header nav a { color: inherit; border-bottom: none; }
.mechanikon-header nav a.current { color: var(--text-emph); }
.mechanikon-header nav a:hover { color: var(--accent); }

/* Compact variant used when a mechanism page has its own hero wordmark
 * below and only needs a subtle parent-link + inter-mechanism nav on top. */
.mechanikon-header.compact {
  height: auto;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  border-bottom: 1px solid var(--border);
}
.mechanikon-header .parent-link {
  color: var(--text-mute);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: none;
}
.mechanikon-header .parent-link:hover { color: var(--accent); }
.mechanikon-header.compact nav {
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * Mechanism-page brand header — each mechanism's own identity is
 * primary (hero wordmark), Mechanikon is a subtle parent link above.
 *
 *   .mechanism-brand
 *     .mechanism-brand__parent   — small link back to /
 *     .mechanism-brand__name     — large wordmark for this mechanism
 */
.mechanism-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-5) 0 var(--sp-4);
}
.mechanism-brand__parent {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
.mechanism-brand__parent::before {
  content: "↖";
  font-size: 11px;
  opacity: 0.7;
}
.mechanism-brand__parent:hover { color: var(--accent); border-bottom: none; }
.mechanism-brand__name {
  font-family: var(--font-serif);
  color: var(--accent);
  font-size: var(--fs-3xl);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}

.mechanikon-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-mute);
  font-size: var(--fs-sm);
}
.mechanikon-footer .colophon { margin-left: auto; }

/* Screen-reader-only utility                                                   */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Print — mechanisms may override, but a readable default exists              */
@media print {
  html, body { background: white; color: black; }
  .mechanikon-header, .mechanikon-footer { display: none; }
  a { color: black; text-decoration: underline; }
}