/*
 * GovConHelp design tokens, palette A ("Navy + Ember").
 *
 * Source of truth for colors, type, radii and shadows used by plain CSS
 * (legal pages, the user guide, the landing). tailwind.config.js holds the
 * same values for utility classes (`bg-cream`, `text-ink`, `font-mono`);
 * keep the two in sync if you edit colors.
 */

:root {
  /* Surfaces */
  --gch-bg: #F8FAFC;          /* page background */
  --gch-bg-2: #F1F5F9;        /* recessed surface (logo strip, footer) */
  --gch-card: #FFFFFF;        /* elevated cards */
  --gch-line: #E2E8F0;        /* hairline borders */

  /* Type */
  --gch-ink: #0B1A2E;         /* primary text + primary buttons */
  --gch-ink-2: #1E293B;       /* secondary navy (hover, gradient stops) */
  --gch-ink-soft: #475569;    /* secondary text, captions */
  --gch-subtle: #64748B;      /* tertiary text; replaces slate-400 */

  /* Accents */
  --gch-orange: #C2410C;      /* the one accent: main CTA, links, focus */
  --gch-orange-deep: #9A3412; /* hover state + serif italic accent words */
  --gch-green: #15803D;       /* success / "live" indicators */

  /* Status (text on a tint; tints are about 10% of the color) */
  --gch-success: #15803D;
  --gch-success-ink: #166534;
  --gch-success-tint: #E8F2EC;
  --gch-warning: #B45309;
  --gch-warning-ink: #92400E;
  --gch-warning-tint: #F7EEE6;
  --gch-danger: #B91C1C;
  --gch-danger-tint: #F8E8E8;
  --gch-info: #1D4ED8;
  --gch-info-tint: #E8EDFB;

  /* Type stack */
  --gch-font-display: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --gch-font-serif:   'IBM Plex Serif', Georgia, serif;
  --gch-font-mono:    'IBM Plex 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 */
  --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(194, 65, 12, 0.35);
}

/* 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(21, 128, 61, 0.18);
}

/* Alpine [x-cloak] hide-until-evaluated.
   Without this, any element that uses x-show / x-if / x-cloak
   flashes VISIBLE for one frame before Alpine boots. Most apparent
   on the Step 7 forms list where expanded action panels would flash
   open then snap shut on page load. */
[x-cloak] {
  display: none !important;
}