/* Shared design tokens for index.html, cv.html and 404.html.
   Committed dark "glass" look in the Midnight palette (navy with gold).
   Passes WCAG AA for body text, muted text, accent text and both button stops. */

:root {
  --bg: #0D1220; --surface: #151B2B; --fg: #E9ECF2; --muted: #9CA4B5; --line: #232B3D;
  --accent: #E3B866; --accent2: #AEB7C8;
  --btn: #E3B866; --btn2: #EDCA86; --btn-fg: #0D1220;
  --offset: #232B3D;
  /* Derived Midnight tokens (added for the bento landing page; base tokens above unchanged) */
  --bg-deep: #090D17;      /* deeper navy for the bottom of the wash and viewer wells */
  --bg-raise: #111728;     /* between --bg and --surface */
  --navy-hi: #1E2740;      /* lifted navy for tile highlights */
  --fg2: #C9CFDB;          /* secondary body text on glass: >= 8.3:1 measured on rendered tiles */
  --muted-hi: #AEB5C4;     /* small muted text on glass: >= 7.5:1 measured on rendered tiles */
  --gold-hi: #F2D59C;      /* light end of gold gradients */
  --gold-deep: #B98C42;    /* strokes and rings only, never text */
  --glow-cool: #3B5B8F;    /* cool steel glow used at low alpha behind glass */
  --bg-floor: #0B1020;     /* bottom of the page wash: still Midnight navy, never near-black */
  --fg-soft: #C3C9D6;      /* second tone of the statement tile: >= 9:1 on rendered glass */
  --steel: #5476B5;        /* cool rim light on the portrait ring; decorative strokes only, never text */
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

/* Base shared by all pages */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
}
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-weight: 600; }
p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
abbr[title] { text-decoration: none; cursor: help; }

/* True small caps label */
.sc {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* Skip link: first focusable element, visible only when focused */
.skip {
  position: absolute;
  left: 1rem;
  top: -100%;
  padding: 0.5rem 0.75rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: 6px;
  z-index: 10;
}
.skip:focus { top: 1rem; }

@media print { .skip { display: none !important; } }