/*
 * GovConHelp design tokens — Direction B ("Live Pipeline").
 *
 * Source of truth for colors, type, radii, shadows. Everything in the
 * marketing landing AND the signed-in app shell pulls from these
 * variables, so a future re-skin only touches this file.
 *
 * The Tailwind CDN config in base.html mirrors these names so utility
 * classes (`bg-cream`, `text-ink`, `font-mono`) compose with the same
 * palette — keep the two in sync if you edit colors.
 */

:root {
  /* Surfaces */
  --gch-bg: #FBFAF7;          /* page background — warm cream */
  --gch-bg-2: #F2F0EA;        /* recessed surface (logo strip, footer) */
  --gch-card: #FFFFFF;        /* elevated cards */
  --gch-line: #E5E1D6;        /* hairline borders */

  /* Type */
  --gch-ink: #0B1A2E;         /* primary text + nav-quality buttons */
  --gch-ink-2: #1B2D4A;       /* secondary navy (gradient stops) */
  --gch-ink-soft: #475569;    /* secondary text, captions */

  /* Accents */
  --gch-orange: #E86A2C;      /* primary brand accent */
  --gch-orange-deep: #C44E15; /* hover state + serif italic accent words */
  --gch-green: #2E7D5B;       /* success / "live" indicators */

  /* Type stack */
  --gch-font-display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --gch-font-serif:   'Source Serif 4', Georgia, serif;
  --gch-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --gch-radius-sm: 6px;
  --gch-radius-md: 10px;
  --gch-radius-lg: 14px;
  --gch-radius-xl: 18px;
  --gch-radius-pill: 999px;

  /* Shadows — copied directly from direction-b.jsx */
  --gch-shadow-hairline: 0 1px 2px rgba(11, 26, 46, 0.04);
  --gch-shadow-button:   0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 4px 12px rgba(11, 26, 46, 0.18);
  --gch-shadow-card:     0 1px 0 rgba(11, 26, 46, 0.04), 0 24px 60px -20px rgba(11, 26, 46, 0.25), 0 0 0 1px rgba(11, 26, 46, 0.06);
  --gch-shadow-cta:      0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 6px 20px rgba(232, 106, 44, 0.4);
}

/* Global resets */
html, body {
  margin: 0;
  padding: 0;
  background: var(--gch-bg);
  color: var(--gch-ink);
  font-family: var(--gch-font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }

/* Helper classes used by templates */
.font-mono       { font-family: var(--gch-font-mono); }
.font-serif      { font-family: var(--gch-font-serif); }
.font-serif-italic {
  font-family: var(--gch-font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Mono "eyebrow" — uppercase tracking-out, used above section headlines */
.eyebrow {
  font-family: var(--gch-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gch-ink-soft);
}

/* Pill badges (e.g. "NEW · Compliance matrix beta") */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--gch-line);
  border-radius: var(--gch-radius-pill);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--gch-shadow-hairline);
}

/* The dotted-grid hero backdrop, rendered via radial-mask so it fades out */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gch-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--gch-line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  pointer-events: none;
}

/* Live-status dot (green halo) used in app-window mockups */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--gch-font-mono);
  font-size: 10px;
  color: var(--gch-green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.live-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gch-green);
  box-shadow: 0 0 0 3px rgba(46, 125, 91, 0.18);
}