/* =========================================================================
   Scanlytics Design System - Colors & Type
   --------------------------------------------------------------------------
   Single dark theme. Designed for marketing surface (scanlytics.io) and to
   stay coherent with the existing application (app.scanlytics.io) which uses
   shadcn/ui + Tailwind tokens.

   Brand anchors:
     - Primary blue   #3572ef
     - Emphasis blue  #050c9c  (deep navy, used on hover/active)
     - Deep navy canvas (#0f1420) - dark, but lifted off pure black so
       animations, nodes and engine cards read clearly against it

   Per-pillar identity colors (taken from the app dashboard cards):
     - Coverage      → blue
     - Improvements  → indigo / violet
     - Anomalies     → cyan / teal
     - Risk severity → red / orange / amber / green (semantic only)

   Fonts: Inter (display + body), JetBrains Mono (code, IDs, scan hashes).
   These are loaded from Google Fonts in each HTML; ttfs are not copied
   into /fonts because no proprietary face is in use.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand ------------------------------------------------------ */
  --color-brand-500:        #3572ef;   /* primary blue, CTAs, focus rings */
  --color-brand-600:        #2a5fd9;   /* hover */
  --color-brand-700:        #1f49b8;   /* pressed */
  --color-brand-900:        #050c9c;   /* deep emphasis (logo / hero accent) */
  --color-brand-300:        #7ea7f5;   /* lighter brand tint, links on dark */
  --color-brand-100:        #c9d8fa;   /* soft brand tint, badges */

  /* ---------- Canvas & surfaces (dark only) ------------------------------ */
  --color-canvas:           #0f1420;   /* page background, deep navy */
  --color-surface-1:        #151b28;   /* default card */
  --color-surface-2:        #1c2333;   /* raised card, hovered surface */
  --color-surface-3:        #262e40;   /* sub-nav, chips, table header */
  --color-inset:            rgba(8,11,18,0.45);   /* recessed controls inside cards */
  --color-nav-bg:           rgba(15,20,32,0.80);  /* sticky nav (with blur) */

  /* Animated engine cards: lifted above the canvas so they read as objects */
  --color-engine-card-top:    #1c2334;
  --color-engine-card-bottom: #141a27;
  --color-engine-card-border: rgba(255,255,255,0.12);
  --color-surface-inverse:  #ffffff;   /* white CTA surface (rare) */

  /* ---------- Hairlines (borders) ---------------------------------------- */
  --color-hairline:         rgba(255,255,255,0.09);
  --color-hairline-strong:  rgba(255,255,255,0.15);
  --color-hairline-soft:    rgba(255,255,255,0.05);

  /* ---------- Text ------------------------------------------------------- */
  --color-ink:              #f5f7fa;   /* primary text */
  --color-ink-muted:        #9aa4b2;   /* secondary text, captions */
  --color-ink-subtle:       #717c8c;   /* tertiary, helper, timestamps */
  --color-ink-inverse:      #0b0f17;   /* text on white CTA */

  /* ---------- Pillar identity (per-feature accent) ----------------------- */
  --color-pillar-coverage:        #3572ef;   /* blue,  Coverage */
  --color-pillar-coverage-soft:   #1d3060;   /* card tint background */
  --color-pillar-improvements:        #7c5cff;  /* indigo/violet, Improvements */
  --color-pillar-improvements-soft:   #2a2152;
  --color-pillar-anomalies:           #14b8c4;  /* cyan/teal, Anomalies */
  --color-pillar-anomalies-soft:      #113a40;

  /* ---------- Semantic --------------------------------------------------- */
  --color-success:          #22c55e;
  --color-success-soft:     #0e2a18;
  --color-warning:          #f59e0b;
  --color-warning-soft:     #2b1d06;
  --color-danger:           #ef4444;
  --color-danger-soft:      #2a0f10;
  --color-info:             #3572ef;
  --color-info-soft:        #0f1c3b;

  /* ---------- Risk score gradient (anomaly score 0–100) ------------------ */
  --color-risk-low:         #22c55e;
  --color-risk-medium:      #f59e0b;
  --color-risk-high:        #fb923c;
  --color-risk-critical:    #ef4444;

  /* ---------- Radii ------------------------------------------------------ */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;    /* default - buttons, inputs, list rows */
  --radius-lg:  12px;   /* cards */
  --radius-xl:  16px;   /* feature panels */
  --radius-2xl: 20px;   /* large CTA banner */
  --radius-pill: 9999px;

  /* ---------- Spacing scale (8px base) ----------------------------------- */
  --space-hair: 1px;
  --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;     /* section rhythm */
  --space-32: 128px;

  /* ---------- Shadows (used sparingly on dark) --------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.30);
  --shadow-md:  0 4px 12px rgba(0,0,0,.35);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.45);
  --shadow-glow-brand: 0 0 0 1px rgba(53,114,239,.4), 0 8px 24px rgba(53,114,239,.18);

  /* ---------- Font families --------------------------------------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale (semantic) ------------------------------------- */
  /* Display - hero, section openers. Tight line-height, negative tracking. */
  --type-display-xl-size:    72px;   --type-display-xl-line: 1.05;  --type-display-xl-track: -0.025em;  --type-display-xl-weight: 700;
  --type-display-lg-size:    56px;   --type-display-lg-line: 1.08;  --type-display-lg-track: -0.022em;  --type-display-lg-weight: 700;
  --type-display-md-size:    40px;   --type-display-md-line: 1.10;  --type-display-md-track: -0.018em;  --type-display-md-weight: 700;
  --type-headline-size:      28px;   --type-headline-line: 1.20;    --type-headline-track: -0.012em;    --type-headline-weight: 600;
  --type-title-size:         22px;   --type-title-line: 1.25;       --type-title-track: -0.008em;       --type-title-weight: 600;
  --type-subhead-size:       18px;   --type-subhead-line: 1.45;     --type-subhead-track: -0.004em;     --type-subhead-weight: 500;

  /* Body - relaxed line-height. */
  --type-body-lg-size:       18px;   --type-body-lg-line: 1.65;
  --type-body-size:          16px;   --type-body-line: 1.60;
  --type-body-sm-size:       14px;   --type-body-sm-line: 1.55;
  --type-caption-size:       13px;   --type-caption-line: 1.45;

  /* Utility */
  --type-eyebrow-size:       12px;   --type-eyebrow-line: 1.25;   --type-eyebrow-track: 0.12em;
  --type-button-size:        14px;   --type-button-line: 1.20;    --type-button-weight: 600;
  --type-code-size:          13px;   --type-code-line: 1.60;
}

/* =========================================================================
   Semantic element styles - opinionated defaults
   ========================================================================= */

html, body {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-feature-settings: 'cv05','cv11','ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

h1, .h1 {
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-line);
  letter-spacing: var(--type-display-lg-track);
  font-weight: var(--type-display-lg-weight);
  color: var(--color-ink);
  margin: 0;
}

h2, .h2 {
  font-size: var(--type-display-md-size);
  line-height: var(--type-display-md-line);
  letter-spacing: var(--type-display-md-track);
  font-weight: var(--type-display-md-weight);
  color: var(--color-ink);
  margin: 0;
}

h3, .h3 {
  font-size: var(--type-headline-size);
  line-height: var(--type-headline-line);
  letter-spacing: var(--type-headline-track);
  font-weight: var(--type-headline-weight);
  color: var(--color-ink);
  margin: 0;
}

h4, .h4 {
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  letter-spacing: var(--type-title-track);
  font-weight: var(--type-title-weight);
  color: var(--color-ink);
  margin: 0;
}

p, .body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--color-ink-muted);
  margin: 0;
}

.body-lg {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  color: var(--color-ink-muted);
}

.body-sm {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  color: var(--color-ink-muted);
}

.caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--color-ink-subtle);
}

.eyebrow {
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-ink-muted);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--type-code-size);
  line-height: var(--type-code-line);
  color: var(--color-ink);
}

a {
  color: var(--color-brand-300);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: #a8c0f8; }

::selection { background: rgba(53,114,239,0.35); color: var(--color-ink); }

/* Focus ring (accessibility) */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}