/* =========================================================================
   Pentr — design tokens
   Acid-lime-on-deep-blue terminal aesthetic + editorial serif gravitas.
   Import once at the root of any Pentr surface.
   ========================================================================= */

/* Fonts are linked from each page's <head> (with preconnect) rather than
   @imported here, so they download in parallel with this file. */

:root {
  /* -----------------------------------------------------------------------
     COLOR — Base / surface ramp
     Berkeley blue taken down to a night floor. Never black: the deepest
     surface on any Pentr screen still carries the brand's blue. Layered
     surface rises toward the viewer with each step.
     ----------------------------------------------------------------------- */
  --bg:            #01162a;   /* page background */
  --bg-elev-1:     #011c35;   /* card / panel */
  --bg-elev-2:     #01213f;   /* raised card, modal */
  --bg-elev-3:     #143454;   /* popover, tooltip */
  --bg-inset:      #010f1c;   /* code blocks, terminal */

  /* Foreground ramp */
  --fg:            #e8edf2;   /* primary text */
  --fg-2:          #b9c2cc;   /* secondary text */
  --fg-3:          #8a92a0;   /* tertiary / labels */
  --fg-4:          #5f6771;   /* placeholder / disabled */
  --fg-inverse:    #01162a;   /* on accent backgrounds */

  /* Borders / lines */
  --border:        #223446;
  --border-strong: #324354;
  --border-faint:  #14273b;

  /* -----------------------------------------------------------------------
     COLOR — Brand accent
     Pentr's "signal" color. Acid lime. Use sparingly: CTA, focus rings,
     terminal cursor, active state. NEVER for body text on light bg.
     ----------------------------------------------------------------------- */
  --signal:        #cffa3c;   /* lime */
  --signal-dim:    #a3dc49;   /* yellow green — hover-darker for dark contexts */
  --signal-deep:   #68b465;   /* mantis — press / pinned-against-light */
  --signal-glow:   rgba(207, 250, 60, 0.18);   /* outer glow / focus halo */
  --signal-wash:   rgba(207, 250, 60, 0.08);   /* tint for selected rows */

  /* -----------------------------------------------------------------------
     COLOR — Depth ramp
     The three dark blues of the brand palette. They are never text or
     accent colors: they exist to give a long page distinct rooms. See the
     SECTION TONES block in styles.css for the surface ramps built off them.
     ----------------------------------------------------------------------- */
  --depth-teal:    #014d61;   /* midnight green */
  --depth-indigo:  #023f5c;   /* indigo dye */
  --depth-navy:    #022e58;   /* berkeley blue */

  /* -----------------------------------------------------------------------
     COLOR — Severity (findings, CVSS bands)
     Drawn from infosec convention. Always paired with a label — never
     color alone (a11y).
     ----------------------------------------------------------------------- */
  --sev-critical:  #ff3b3b;
  --sev-high:      #ff7849;
  --sev-medium:    #ffc847;
  --sev-low:       #6ee7b7;
  --sev-info:      #58a6ff;

  --sev-critical-wash: rgba(255, 59, 59, 0.12);
  --sev-high-wash:     rgba(255, 120, 73, 0.12);
  --sev-medium-wash:   rgba(255, 200, 71, 0.14);
  --sev-low-wash:      rgba(110, 231, 183, 0.12);
  --sev-info-wash:     rgba(88, 166, 255, 0.12);

  /* -----------------------------------------------------------------------
     COLOR — Status (engagement / pipeline)
     ----------------------------------------------------------------------- */
  --status-running: #58a6ff;
  --status-passed:  #6ee7b7;
  --status-failed:  #ff3b3b;
  --status-paused:  #ffc847;
  --status-queued:  #8a92a0;

  /* -----------------------------------------------------------------------
     TYPE — families
     Display: Newsreader (editorial, audit-grade gravitas)
     UI / body: IBM Plex Sans (technical sans, distinct from Inter/Roboto)
     Mono: JetBrains Mono (terminal output, code, IPs, hashes, CVEs)
     ----------------------------------------------------------------------- */
  --font-display: 'Newsreader', 'Tiempos Headline', 'GT Sectra', Georgia, 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', 'Söhne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* TYPE — scale (modular, 1.250 — major third) */
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-36: 2.25rem;
  --t-48: 3rem;
  --t-60: 3.75rem;
  --t-72: 4.5rem;
  --t-96: 6rem;

  /* TYPE — weights */
  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;

  /* TYPE — line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* TYPE — letter spacing */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-mega:     0.18em;     /* eyebrow / category labels */

  /* -----------------------------------------------------------------------
     SPACING — 4px base, geometric-ish
     ----------------------------------------------------------------------- */
  --s-0:  0;
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  32px;
  --s-9:  40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 128px;

  /* -----------------------------------------------------------------------
     RADII — restrained. Sharp by default; soft only on chips and modals.
     ----------------------------------------------------------------------- */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-4:    8px;
  --r-5:    12px;
  --r-6:    16px;
  --r-pill: 999px;

  /* -----------------------------------------------------------------------
     SHADOWS — dark UI uses outline + signal-glow more than blur.
     Reserved for overlays.
     ----------------------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 1px var(--border);
  --shadow-3: 0 18px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--border-strong);
  --shadow-focus: 0 0 0 3px var(--signal-glow), 0 0 0 1px var(--signal);
  --shadow-glow: 0 0 28px var(--signal-glow);

  /* -----------------------------------------------------------------------
     MOTION — Pentr animations are short, eased, and never bouncy.
     ----------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-step:    steps(8, end);                    /* terminal cursor / typewriter */
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     360ms;

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --container:   1240px;
  --container-wide: 1440px;
  --sidebar-w:   248px;
  --topbar-h:    52px;
}

/* =========================================================================
   SEMANTIC TYPE — apply these classes rather than restyling every element.
   ========================================================================= */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display-1 {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-display-2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-48);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-36);
  font-weight: var(--w-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-20);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-16);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--t-15);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--t-13);
  font-weight: var(--w-medium);
  line-height: var(--lh-normal);
  color: var(--fg);
  letter-spacing: var(--ls-snug);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--t-12);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-feature-settings: "zero" 1, "ss01" 1;
}

.t-code {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  font-weight: var(--w-regular);
  line-height: var(--lh-normal);
  color: var(--signal);
  background: var(--bg-inset);
  padding: 1px 6px;
  border-radius: var(--r-2);
  border: 1px solid var(--border-faint);
}

/* =========================================================================
   GLOBAL RESET (light — opt in per surface)
   ========================================================================= */

.pentr-surface {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-15);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1, "cv11" 1;
}

.pentr-surface ::selection {
  background: var(--signal);
  color: var(--fg-inverse);
}