/* =========================================================================
   FDT Research Library — document grid

   FDT design system is dark-native; the canonical --fdt-* tokens used in
   the dark rules below mirror design.frontierdefensetech.com exactly.
   Hextra ships a light-mode toggle, so we provide a graceful fallback
   under html:not(.dark) — those rules use --fdt-light-* helpers (defined
   below alongside the canonical palette) for values that have no FDT
   equivalent (light-mode is not a sanctioned FDT surface).
   ========================================================================= */

/* Self-hosted Latin subsets — defense endpoints can't assume external
   resolution (design system § Implementation). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}

:root {
  /* Navy surfaces */
  --fdt-navy-900: #0A1220;
  --fdt-navy-800: #0F1A2E;
  --fdt-navy-700: #16243D;
  --fdt-navy-600: #1E3050;

  /* Fog (text + light UI) */
  --fdt-fog-100: #E8EEF7;
  --fdt-fog-200: #C5D1E2;

  /* Steel (metadata + muted UI) */
  --fdt-steel-300: #8A9BB4;
  --fdt-steel-400: #5A6D8A;

  /* Electric (single accent) */
  --fdt-electric-300: #7BA9FF;
  --fdt-electric-400: #4A8DFF;
  --fdt-electric-500: #1D6EF5;
  --fdt-electric-600: #1456C7;

  /* Divider / border */
  --fdt-divider: #1F3352;

  /* Glow scale */
  --fdt-glow-sm: 0 0 16px 2px rgba(29, 110, 245, 0.30);

  /* Typography */
  --fdt-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fdt-font-wordmark: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --fdt-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing (4px base) */
  --fdt-space-1: 4px;
  --fdt-space-2: 8px;
  --fdt-space-3: 12px;
  --fdt-space-4: 16px;
  --fdt-space-5: 24px;
  --fdt-space-6: 32px;

  /* Radii */
  --fdt-radius-sm: 2px;
  --fdt-radius-md: 4px;
  --fdt-radius-lg: 8px;

  /* Motion */
  --fdt-motion-fast: 150ms;
  --fdt-motion-base: 200ms;
  --fdt-ease-ui:     cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Hextra theme overrides — Hextra reads these and uses them for
     primary/accent color throughout its layout (link colors, focus rings,
     active nav indicator, etc.). Mapping them to FDT electric ensures
     the navbar/footer/links inherit the FDT palette without forking
     the theme. */
  --primary-hue: 215;
  --primary-saturation: 92%;
  --primary-lightness: 54%;

  /* Light-mode fallback values — Hextra has a light/dark toggle, but
     light-mode is NOT a sanctioned FDT surface (the design system is
     dark-native). These are pragmatic gray fallbacks used only inside
     the html:not(.dark) overrides below; they do not appear in the
     canonical FDT palette. */
  --fdt-light-surface:        #F4F5F7;
  --fdt-light-surface-border: #E1E4E8;
  --fdt-light-text:           #374151;

  /* Brand-fill is mode-agnostic — electric blue reads on both palettes. */
  --wa-color-brand-fill-loud:   var(--fdt-electric-500);
  --wa-focus-ring:              var(--fdt-electric-500);
}

/* WebAwesome surface/text token bridge — only applied when WebAwesome's
   dark palette is active (which is mirrored from Hextra's .dark class
   by the inline init in head-end.html). Without scoping, toggling Hextra
   to light mode would leave wa-* primitives stuck in FDT navy.
   Light mode falls back to WebAwesome's own theme defaults. */
.wa-dark {
  --wa-color-surface-default:   var(--fdt-navy-800);
  --wa-color-surface-raised:    var(--fdt-navy-700);
  --wa-color-surface-lowered:   var(--fdt-navy-900);
  --wa-color-text-normal:       var(--fdt-fog-100);
  --wa-color-text-quiet:        var(--fdt-fog-200);
  --wa-color-text-muted:        var(--fdt-steel-300);
  --wa-color-text-subtle:       var(--fdt-steel-300);
}

/* ── Site-wide typography overrides ──────────────────────────────────
   Hextra defaults to a Tailwind sans-serif stack; bind to Inter (FDT
   body font) so the nav/footer/markdown chrome inherits FDT typography. */

body,
input,
select,
textarea {
  font-family: var(--fdt-font-body);
}

code, pre, kbd, samp {
  font-family: var(--fdt-font-mono);
}

/* ── Document grid filters ───────────────────────────────────────────── */

.library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fdt-space-2);
  margin-bottom: var(--fdt-space-5);
}

/* Filter chips are <wa-button> — visual styling comes from WebAwesome
   via the --wa-color-* token bridge above. We only set the mono font
   so the chip labels read like tactical labels per the design system. */
wa-button.library-tag::part(label) {
  font-family: var(--fdt-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* ── Document grid ───────────────────────────────────────────────────── */

.library-grid {
  display: grid;
  gap: var(--fdt-space-4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.library-item {
  background: var(--fdt-navy-800);
  border: 1px solid var(--fdt-divider);
  border-radius: var(--fdt-radius-md);
  color: var(--fdt-fog-100);
  display: flex;
  flex-direction: column;
  padding: var(--fdt-space-5);
  text-decoration: none;
  transition:
    border-color var(--fdt-motion-fast) var(--fdt-ease-ui),
    box-shadow var(--fdt-motion-base) var(--fdt-ease-ui);
}

.library-item:hover {
  border-color: var(--fdt-electric-400);
  box-shadow: var(--fdt-glow-sm);
}

.library-item[hidden] {
  display: none;
}

.library-item-header {
  align-items: center;
  display: flex;
  gap: var(--fdt-space-2);
  margin-bottom: var(--fdt-space-3);
}

.library-item-type {
  align-items: center;
  background: var(--fdt-electric-500);
  border-radius: var(--fdt-radius-sm);
  color: var(--fdt-fog-100);
  display: inline-flex;
  font-family: var(--fdt-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  gap: var(--fdt-space-1);
  letter-spacing: 0.1em;
  padding: 2px 6px;
  text-transform: uppercase;
}

.library-item-meta i {
  margin-right: 4px;
  opacity: 0.7;
}

.library-item-tags {
  display: flex;
  gap: var(--fdt-space-1);
}

.library-item-tag {
  background: var(--fdt-navy-700);
  border-radius: var(--fdt-radius-sm);
  color: var(--fdt-steel-300);
  font-family: var(--fdt-font-mono);
  font-size: 0.7rem;
  padding: 2px 6px;
}

.library-item-title {
  color: var(--fdt-fog-100);
  font-family: var(--fdt-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 var(--fdt-space-2);
}

.library-item-desc {
  color: var(--fdt-fog-200);
  font-size: 0.875rem;
  margin: 0 0 var(--fdt-space-3);
}

.library-item-meta {
  color: var(--fdt-steel-300);
  display: flex;
  font-family: var(--fdt-font-mono);
  font-size: 0.75rem;
  gap: var(--fdt-space-4);
  margin-top: auto;
}

/* ── Light-mode overrides ─────────────────────────────────────────────
   Hextra adds .dark to <html> for dark mode; absence means light. The
   FDT design system is dark-native, so this is a graceful fallback only.
   Filter chips are <wa-button> and inherit WebAwesome's own light/dark
   handling via the token bridge — no per-mode override needed.
*/
html:not(.dark) .library-item {
  background: var(--fdt-light-surface);
  border-color: var(--fdt-light-surface-border);
  color: var(--fdt-light-text);
}

html:not(.dark) .library-item:hover {
  border-color: var(--fdt-electric-500);
  box-shadow: 0 2px 12px rgba(29, 110, 245, 0.10);
}

html:not(.dark) .library-item-tag {
  background: var(--fdt-light-surface-border);
  color: var(--fdt-steel-400);
}

html:not(.dark) .library-item-title {
  color: var(--fdt-navy-900);
}

html:not(.dark) .library-item-desc,
html:not(.dark) .library-item-meta {
  color: var(--fdt-steel-400);
}