/* UndercoverDoc.ai — Foundations
 * Tiempos Headline (display, with Fraunces as web fallback)
 * IBM Plex Sans (UI / body)
 * IBM Plex Mono (technical metadata)
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  /* ---- Core palette (five colors, no exceptions) ---- */
  --navy:      #0F1B2D;   /* Midnight Navy — primary dark surface     */
  --navy-2:    #1E3A5F;   /* Slate Navy — elevated surfaces, cards    */
  --bone:      #FAFAF7;   /* Bone — primary light surface             */
  --gold:      #B8862E;   /* Burnished Gold — the seal, single accent */
  --ash:       #4A5563;   /* Ash — muted UI, secondary text           */

  /* ---- Semantic surfaces / text ---- */
  --bg:            var(--bone);
  --bg-elevated:   #FFFFFF;
  --bg-inverse:    var(--navy);
  --bg-elevated-inverse: var(--navy-2);

  --fg1:           var(--navy);             /* primary text on light    */
  --fg2:           var(--ash);              /* secondary text on light  */
  --fg3:           rgba(15, 27, 45, 0.55);  /* tertiary / labels        */
  --fg-on-dark-1:  var(--bone);
  --fg-on-dark-2:  rgba(250, 250, 247, 0.70);
  --fg-on-dark-3:  rgba(250, 250, 247, 0.45);

  --accent:        var(--gold);
  --accent-soft:   rgba(184, 134, 46, 0.08);
  --accent-line:   rgba(184, 134, 46, 0.40);

  --line:          rgba(15, 27, 45, 0.12);
  --line-strong:   var(--navy);
  --line-dark:     rgba(250, 250, 247, 0.12);

  /* ---- Type families ---- */
  --serif-display: 'Newsreader', 'Times New Roman', Georgia, serif;
  --sans:          'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:          'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale ---- */
  --display-xl: 88px;
  --display-l:  64px;
  --display-m:  48px;
  --display-s:  32px;
  --display-xs: 24px;

  --body-xl: 22px;
  --body-l:  17px;
  --body-m:  15px;
  --body-s:  13px;
  --body-xs: 11px;

  --mono-l:  14px;
  --mono-m:  12px;
  --mono-s:  11px;
  --mono-xs: 10px;

  /* ---- Spacing ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- Radii — small only; the brand reads architectural ---- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---- Shadows — restrained. No drop shadows on UI surfaces ---- */
  --shadow-card: 0 30px 60px rgba(15, 27, 45, 0.18);
  --shadow-floating: 0 8px 24px rgba(15, 27, 45, 0.10);

  /* ---- Tracking presets (for mono-cap labels) ---- */
  --track-stamp:   0.25em;
  --track-label:   0.15em;
  --track-classif: 0.35em;
}

/* ---- Base ---- */
html, body { background: var(--bg); color: var(--fg1); }
body {
  font-family: var(--sans);
  font-size: var(--body-l);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display headings (Tiempos / Fraunces) ---- */
h1, .h1 {
  font-family: var(--serif-display);
  font-size: var(--display-xl);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--fg1);
}
h2, .h2 {
  font-family: var(--serif-display);
  font-size: var(--display-m);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
h3, .h3 {
  font-family: var(--serif-display);
  font-size: var(--display-s);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--serif-display);
  font-size: var(--display-xs);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 em, h2 em, h3 em, .display-italic-gold {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
}

/* ---- Body text ---- */
p, .p {
  font-family: var(--sans);
  font-size: var(--body-l);
  line-height: 1.6;
  color: var(--fg2);
}
.p-strong { color: var(--fg1); }

/* ---- Tagline (signature lockup) ----
 * Two lines, inseparable. Second line in burnished gold italic. */
.tagline {
  font-family: var(--serif-display);
  font-size: var(--display-s);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.tagline .gold,
.tagline em { color: var(--gold); font-style: italic; }

/* ---- Mono labels — classification stamps, case file numbers, coords ---- */
.mono-label {
  font-family: var(--mono);
  font-size: var(--body-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg3);
}
.mono-stamp {
  font-family: var(--mono);
  font-size: var(--mono-m);
  font-weight: 600;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--gold);
}
.mono-classification {
  font-family: var(--mono);
  font-size: var(--mono-s);
  font-weight: 600;
  letter-spacing: var(--track-classif);
  text-transform: uppercase;
  color: var(--gold);
}
.mono-coord {
  font-family: var(--mono);
  font-size: var(--mono-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--fg3);
}
code, kbd, samp, .mono {
  font-family: var(--mono);
  font-size: 0.92em;
}

/* ---- Section header pattern: rule + mono label + serif H2 ---- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: var(--body-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ash);
}
.section-eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--gold);
}

/* ---- Inverse surface helper ---- */
.on-dark { background: var(--navy); color: var(--fg-on-dark-1); }
.on-dark p { color: var(--fg-on-dark-2); }
.on-dark .mono-label { color: var(--fg-on-dark-3); }

/* ---- Photography / imagery utility ----
 * Conforms any photo to the brand's cool monochrome / navy-tinted register.
 * Wrap an <img> in <figure class="brand-duotone"> or apply directly to <img>. */
.brand-duotone {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}
.brand-duotone > img,
img.brand-duotone {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.08) brightness(0.92);
  mix-blend-mode: luminosity;
  opacity: 0.92;
}
.brand-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,27,45,0.18), rgba(15,27,45,0.34));
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}
/* Optional grain — subtle film texture */
.brand-duotone.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}