/*
Theme Name: RealAndWorks
Theme URI: https://realandworks.com
Author: Regard Vermeulen
Description: Proof-led portfolio theme — Self-Hosted AI & Autonomous Agent Systems Engineer.
Version: 0.3.0
Text Domain: realandworks
*/

/* ── Self-hosted display face: Space Grotesk (OFL) ─────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/space-grotesk-700.woff2") format("woff2");
}

/* ── Bespoke tokens: neutral charcoal ink + one warm accent ────────────── */
:root {
  /* Surfaces — neutral charcoal, warmed off the blue-black */
  --bg:        #16181b;
  --surface:   #1d2024;
  --surface-2: #25282d;
  --border:    #2a2e33;
  --border-2:  #383d44;

  /* Text — warm off-white through neutral grays */
  --text:      #eceae6;
  --muted:     #9b9d98;
  --faint:     #898c85;

  /* Accent — a single restrained warm chalk/amber. Used sparingly. */
  --accent:        #d8a657;
  --accent-hi:     #e7bd79;   /* hover/brighter amber */
  --accent-ink:    #1a140a;   /* dark ink on amber fill */
  --accent-soft:   rgba(216, 166, 87, 0.12);
  --accent-line:   rgba(216, 166, 87, 0.30);
  --live:          #5fa776;   /* muted status LED (functional, not brand) */
  --warm:          #d8a657;

  /* Type */
  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout */
  --maxw:     1080px;
  --measure:  720px;
  --radius:   12px;
  --radius-sm: 8px;
  --gap:      18px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 16px/1.65 var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img, video, svg { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--text); }

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font: 600 14px/1 var(--mono);
}
.skip-link:focus { left: 0; text-decoration: none; }