/* ============================================================
   FullHunt — Canonical Design Tokens
   SINGLE SOURCE OF TRUTH for color, type, spacing, radius, focus, motion.
   Source: core/static/css/fullhunt-tokens.css
   Copied into each app's static/ (landing, asm, console). Regenerate copies
   from this file on change. Load this BEFORE the app's own stylesheet.

   Direction (locked 2026-06-16): dark + gold security platform.
   Gold verified against the logo wordmark (#ffb00a–#ffbc33 amber→orange gradient).
   ============================================================ */

:root {
  /* ---- Neutral surfaces (GitHub-dark family) ---- */
  --natural-100: #0d1117;   /* page background */
  --natural-150: #0b111f;   /* sidebar / nav shell */
  --natural-200: #131927;   /* cards / panels */
  --natural-300: #1a2332;   /* raised / hover surface */
  --natural-350: #1f2937;
  --natural-400: #374151;

  /* ---- Brand ---- */
  --color-primary: #ffbc33;          /* canonical gold — matches logo */
  --color-primary-hover: #e5a82e;
  --color-primary-2: #392e00;
  --color-secondary: #39c0ed;
  --color-gray: #9ca3af;
  --color-dark-gray: #6b7280;

  /* Gold aliases + the logo gradient (wordmark / logo use ONLY) */
  --fh-yellow: var(--color-primary);
  --fh-gold: var(--color-primary);
  --fh-yellow-hover: var(--color-primary-hover);
  --fh-gold-hover: var(--color-primary-hover);
  --fh-gold-gradient: linear-gradient(180deg, #ffc94d 0%, #ff9a08 100%);

  /* Purple — one accent, one deep brand tone. (Retired: #9d99f0, #4f46e5, #7c3aed, #480689) */
  --fh-purple: #7f7aed;
  --fh-purple-deep: #231469;         /* meta theme-color / dark accents */

  --fh-cyan: #39c0ed;
  --fh-blue: #58a6ff;

  /* ---- Backgrounds (semantic) ---- */
  --fh-bg-primary: var(--natural-100);
  --fh-bg-sidebar: var(--natural-150);
  --fh-bg-secondary: var(--natural-200);
  --fh-bg-tertiary: var(--natural-300);
  --fh-bg-accent: var(--natural-300);

  /* ---- Status ---- */
  --fh-success: #00b74a;
  --fh-danger: #f93154;
  --fh-warning: #ffa900;

  /* ---- Vulnerability severity ramp (dashboards) ---- */
  --fh-sev-critical: #f93154;
  --fh-sev-high: #ff8c1a;
  --fh-sev-medium: #e3b341;
  --fh-sev-low: #3fb950;
  --fh-sev-info: #58a6ff;

  /* ---- Muted accent fills ---- */
  --fh-yellow-muted: rgba(255, 188, 51, 0.22);
  --fh-purple-muted: rgba(127, 122, 237, 0.22);
  --fh-cyan-muted: rgba(57, 192, 237, 0.22);

  /* ---- Text ---- */
  --fh-text-primary: #c9d1d9;
  --fh-text-secondary: var(--color-gray);
  --fh-text-muted: #8b97a8;           /* lifted from #7a8290 to clear WCAG AA on --natural-100 */

  /* ---- Borders ---- */
  --fh-border: rgba(255, 255, 255, 0.16);
  --fh-border-accent: #1f2b47;
  --fh-border-hover: #37466a;

  /* ---- Layout ---- */
  --fh-sidebar-width: 270px;

  /* ---- Type scale ---- */
  --fs-h1: 1.5rem;        /* 24px */
  --fs-h2: 1.25rem;       /* 20px */
  --fs-h3: 1.125rem;      /* 18px */
  --fs-body: 1rem;        /* 16px */
  --fs-small: 0.875rem;   /* 14px */
  --fs-xsmall: 0.75rem;   /* 12px */

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* ---- Radius scale ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  /* ---- Focus ring (designed, not the default browser outline) ---- */
  --fh-focus-ring: 0 0 0 2px var(--natural-100), 0 0 0 4px var(--color-primary);
}

/* ============================================================
   Shared accessibility + motion primitives
   ============================================================ */

/* Visible keyboard focus everywhere; suppressed only for mouse focus.
   This is the correct way to do it — NOT a blanket `outline: none`. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Respect reduced-motion globally for any always-on/decorative animation. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}