/* ==========================================================================
   FrankfurtFinder V2 — Global Design System
   FINAL VISUAL REFINEMENT (v2). Warmer, deeper hierarchy, petrol-driven.
   ========================================================================== */

/* --- GOOGLE FONTS (loaded via <link> in HTML for performance) -- */

/* --- CSS CUSTOM PROPERTIES: COLORS --------------------------- */
:root {
  /* Page canvas */
  --bg-page:       #faf9f7;

  /* Text hierarchy — warmer, less cool-grey */
  --ink:           #191817;
  --ink-soft:      #46423c;   /* was #57534e — warmer secondary */
  --ink-mute:      #726c62;   /* was #8a857e — warmer muted */
  --ink-faint:     #aca690;

  /* Dividers & borders — warmer palette */
  --divider:       #cbc6bb;
  --border:        #e2ddd0;   /* was #e4e1db — warmer card border */
  --border-row:    #eeece7;
  --border-strong: #d6d2ca;

  /* Surfaces — warm-tinted, not stark white */
  --surface:              #fffdf8;   /* was #ffffff — warm card fill */
  --surface-elevated:     #fffdf7;   /* Depth 2-3 configurator/result fills */
  --surface-recessed:     #f6f4ef;   /* Evidence Ledger rows, "still unknown" */
  --chip-bg:              #f0eee9;
  --table-head-bg:        #f4f2ee;

  /* Semantic accents — richer, more intentional */
  --gold:          #b3894a;   /* was #9a7d43 — richer brand gold */
  --gold-fill:     #d9b779;   /* was #c8b273 — gold on dark backgrounds */
  --green:         #3f7a5a;   /* was #5c7a63 — deeper verified green */
  --brick:         #a6432b;   /* was #a6472e — slightly adjusted brick */

  /* Refined semantic system — new tokens */
  --ff-petrol:       #3d6470;   /* Configurator borders/shadows, BETA labels */
  --ff-conditional:  #b7791f;   /* Conditional/caution — distinct from brand-gold */
  --ff-unknown:      #726c62;   /* Unknown/Not Included states */

  /* Footer dark — slightly warmer text */
  --footer-bg:       #191817;
  --footer-text:     #f2efe9;   /* was #e8e5df */
  --footer-mute-1:   #857f74;
  --footer-mute-2:   #706a5e;
  --footer-mute-3:   #55504a;
  --footer-divider:  #2e2b27;
  --footer-brand-bg: #2a2825;

  /* Typography */
  --font-sans:  'Hanken Grotesk', -apple-system, sans-serif;
  --font-serif: 'Newsreader', 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Shadows — flat by design, hard offsets only, no blur */
  --shadow-lang-pill:    0 1px 2px rgba(0,0,0,.08);
  --shadow-intent:       0 2px 0 #191817;   /* Precision Instrument */
  --shadow-configurator: 0 1px 0 #3d6470;   /* Depth 3 — petrol offset */
  --shadow-primary:      0 3px 0 #191817;   /* Depth 4 — ink offset, strongest */

  /* Border radius */
  --radius-control: 7px;
  --radius-card:    10px;
  --radius-panel:   14px;
  --radius-pill:    999px;
  --radius-logo:    8px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 40px;
  --section-gap:   76px;
  --block-gap-lg:  88px;
}

/* --- RESET --------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  color: var(--ink);
}

input, select, button {
  font-family: inherit;
  outline: none;
  border: none;
  background: transparent;
  color: var(--ink);
}
input::placeholder {
  color: var(--ink-faint);
}

/* --- UTILITY CLASSES ----------------------------------------- */
.container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  box-sizing: border-box;
}

/* Eyebrow — mono uppercase gold, stronger weight */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Kicker — serif italic gold */
.kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 19px;
  color: var(--gold);
}

/* Section spacing */
.section {
  margin-top: var(--section-gap);
}
.section-lg {
  margin-top: var(--block-gap-lg);
}

.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;
}