/* GrafStack site — Broadsheet design-system tokens + the components the pages use.
   Shared by index.html (landing) and bot.html. Page-specific font/link overrides
   live in each page's inline <style>. */
:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #0088b0;
  --color-accent-2: #d6006c;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-accent-600: #1186ac;
  --color-accent-700: #006786;
  --color-accent-800: #004961;

  --color-accent-2-100: #fff1f4;
  --color-accent-2-700: #aa0b56;
  --color-accent-2-900: #4b1528;

  --color-process-yellow: #edbb00;

  --space-1: 5px; --space-2: 10px; --space-3: 15px; --space-4: 20px;
  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px;
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);

  --font-heading: "Lora", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; margin: 0; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 1.2;
  color: var(--color-text); background: transparent; border: 1px solid transparent;
  padding: 12px 20px; border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — misregistered CMYK plate headline (Broadsheet print treatment) — */
.cmyk-head { position: relative; }
.cmyk-head .paper {
  color: var(--color-bg);
  text-shadow: 0.027em 0.0185em 0 var(--color-bg), -0.0245em -0.0175em 0 var(--color-bg);
}
.cmyk-head .plate {
  position: absolute; inset: 0; mix-blend-mode: multiply;
  pointer-events: none; user-select: none; text-box: trim-both cap alphabetic;
}
.cmyk-head .plate-c { color: var(--color-accent); }
.cmyk-head .plate-m {
  color: var(--color-accent-2);
  translate: calc(0.018em + 0.009em * var(--press-nx, 0)) calc(0.0125em + 0.006em * var(--press-ny, 0));
}
.cmyk-head .plate-y {
  color: var(--color-process-yellow);
  translate: calc(-0.0155em + 0.009em * var(--press-nx, 0)) calc(-0.0115em + 0.006em * var(--press-ny, 0));
}