/* VigIA Detect — all design tokens flattened into one request.
   Generated from tokens/*.css; edit those and rebuild. */

/* tokens/fonts.css */
/* VigIA Detect — Webfonts.
   Plus Jakarta Sans matches the slide deck's geometric sans (headings + body);
   JetBrains Mono matches the spaced uppercase readouts (HOJE, TOTEM ATIVO, timestamps).
   SUBSTITUTION: the wordmark's custom face was not provided — flagged in readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* tokens/colors.css */
/* VigIA Detect — Color tokens.
   Derived from the logo (electric-blue gradient wordmark, chrome shield)
   and the tech/CFTV visual language: neon blue over deep navy. */
:root {
  /* ---- Brand blue scale (electric / neon) ---- */
  --blue-50: #e6f4ff;
  --blue-100: #b3ddff;
  --blue-200: #80c6ff;
  --blue-300: #4dafff;
  --blue-400: #1a97ff;
  --blue-500: #0080ff; /* primary electric blue */
  --blue-600: #0066d6;
  --blue-700: #004ea3;
  --blue-cyan: #00bfff; /* neon cyan accent (bounding-box glow) */

  /* ---- Ink / navy scale (dark backgrounds) ---- */
  --navy-950: #05070d; /* deepest bg */
  --navy-900: #0a0e17; /* primary dark bg */
  --navy-850: #0e1420;
  --navy-800: #131b2b;
  --navy-700: #1c2740;
  --navy-600: #2a3a5c;
  --navy-500: #3b4f78;

  /* ---- Neutral / silver scale (metallic, light surfaces) ---- */
  --white: #ffffff;
  --gray-50: #f6f8fb;
  --gray-100: #eceff5;
  --gray-200: #dbe1ec;
  --gray-300: #c2cad9;
  --gray-400: #9aa5ba;
  --gray-500: #6b7689;
  --gray-600: #4a5468;
  --silver: #c8d0dc; /* chrome/hardware metallic */

  /* ---- Semantic status ---- */
  --success: #22c55e;
  --warning: #f5a623;
  --danger: #ff3b47;
  --info: var(--blue-500);

  /* ---- Brand gradients ---- */
  --grad-blue: linear-gradient(135deg, #00bfff 0%, #0080ff 50%, #004ea3 100%); /* @kind other */
  --grad-ink: linear-gradient(135deg, #3b4f78 0%, #131b2b 60%, #05070d 100%); /* @kind other */
  --grad-glow: radial-gradient(circle at 50% 0%, rgba(0,128,255,.28), transparent 70%); /* @kind other */

  /* ---- Semantic aliases (light context = default) ---- */
  --bg-page: var(--navy-900);
  --bg-elevated: var(--navy-800);
  --surface-card: var(--white);
  --surface-card-dark: var(--navy-850);
  --text-strong: var(--white);
  --text-body: var(--gray-300);
  --text-muted: var(--gray-500);
  --text-on-light: var(--navy-900);
  --text-body-on-light: var(--gray-600);
  --accent: var(--blue-500);
  --accent-neon: var(--blue-cyan);
  --border-subtle: rgba(255,255,255,.10);
  --border-on-light: var(--gray-200);
  --focus-ring: rgba(0,128,255,.55);
}

/* tokens/typography.css */
/* VigIA Detect — Typography tokens */
:root {
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; /* headings, wordmark-style */
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; /* body & UI */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* timestamps, confidence readouts */

  /* Type scale */
  --fs-display-xl: clamp(2.75rem, 6vw, 4.5rem); /* @kind font */
  --fs-display-lg: clamp(2.25rem, 4.5vw, 3.25rem); /* @kind font */
  --fs-h1: 2.5rem; /* @kind font */
  --fs-h2: 2rem; /* @kind font */
  --fs-h3: 1.5rem; /* @kind font */
  --fs-h4: 1.25rem; /* @kind font */
  --fs-lead: 1.25rem; /* @kind font */
  --fs-body: 1rem; /* @kind font */
  --fs-sm: 0.875rem; /* @kind font */
  --fs-xs: 0.75rem; /* @kind font */
  --fs-mono-sm: 0.8125rem; /* @kind font */

  --lh-tight: 1.05; /* @kind font */
  --lh-heading: 1.15; /* @kind font */
  --lh-snug: 1.35; /* @kind font */
  --lh-body: 1.6; /* @kind font */

  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  --tracking-tight: -0.02em; /* @kind font */
  --tracking-normal: 0; /* @kind font */
  --tracking-wide: 0.04em; /* @kind font */
  --tracking-caps: 0.14em; /* @kind font */
}

/* tokens/spacing.css */
/* VigIA Detect — Spacing, radii, sizing tokens (4px base grid) */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;
  --radius-pill: 999px;

  --container: 1200px;
  --container-narrow: 820px;

  --ring-width: 2px;
}

/* tokens/effects.css */
/* VigIA Detect — Shadows, glows, borders, motion */
:root {
  /* Elevation (soft, for light cards) */
  --shadow-sm: 0 1px 2px rgba(10,14,23,.08), 0 1px 3px rgba(10,14,23,.06);
  --shadow-md: 0 4px 12px rgba(10,14,23,.10), 0 2px 4px rgba(10,14,23,.06);
  --shadow-lg: 0 12px 32px rgba(10,14,23,.14), 0 4px 8px rgba(10,14,23,.08);
  --shadow-float: 0 20px 50px rgba(5,7,13,.35); /* floating notification cards on dark */

  /* Neon glows (bounding boxes, active accents) */
  --glow-blue: 0 0 0 1px rgba(0,128,255,.6), 0 0 16px rgba(0,128,255,.45);
  --glow-cyan: 0 0 20px rgba(0,191,255,.55);
  --glow-soft: 0 0 40px rgba(0,128,255,.25);

  /* Borders */
  --border-neon: 1px solid rgba(0,191,255,.7); /* @kind other */
  --bbox-border: 2px solid #00bfff; /* @kind other */

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-in-out: cubic-bezier(.65,0,.35,1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* Slide-deck surfaces */
  --card-dark: linear-gradient(160deg, rgba(19,27,43,.72), rgba(10,14,23,.72)); /* @kind other */
  --card-dark-active: linear-gradient(160deg, rgba(0,78,163,.30), rgba(10,14,23,.85)); /* @kind other */
  --grad-bar: linear-gradient(180deg, #00bfff 0%, #0080ff 60%, #004ea3 100%); /* @kind other */
  --glow-edge: 0 0 0 1px rgba(0,191,255,.55), 0 0 34px rgba(0,128,255,.28); /* @kind other */
  --scanline: linear-gradient(180deg, transparent, rgba(0,191,255,.55), transparent); /* @kind other */

  /* Decorative dot-grid (corners of sections) */
  --dot-grid: radial-gradient(rgba(0,128,255,.35) 1px, transparent 1.5px); /* @kind other */
  --dot-grid-size: 18px 18px;
}