/* Kenosa FPI — Design Tokens
   Colors & Type foundations.
   Derived from fpi-website (Tailwind theme + index.css).
*/

@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 COLORS — the Kenosa navy signature + technical blues
     ----------------------------------------------------------- */
  --kenosa-navy:   #000080;   /* primary brand — deep federal navy */
  --kenosa-blue:   #0000FF;   /* accent — pure blue for emphasis  */
  --kenosa-slate:  #1E293B;   /* deep surface — terminal/dark sections */

  /* Supporting blues (pulled from Tailwind use: blue-50..blue-900) */
  --blue-50:   #EFF6FF;
  --blue-100:  #DBEAFE;
  --blue-200:  #BFDBFE;
  --blue-400:  #60A5FA;  /* used on dark bg for section eyebrows */
  --blue-500:  #3B82F6;
  --blue-900:  #1E3A8A;  /* navy hover / pressed */

  /* Indigo tint for soft background washes */
  --indigo-50: #EEF2FF;

  /* -----------------------------------------------------------
     NEUTRALS — Slate scale is the backbone
     ----------------------------------------------------------- */
  --white:       #FFFFFF;
  --slate-50:    #F8FAFC;
  --slate-100:   #F1F5F9;
  --slate-200:   #E2E8F0;
  --slate-300:   #CBD5E1;
  --slate-400:   #94A3B8;
  --slate-500:   #64748B;
  --slate-600:   #475569;
  --slate-700:   #334155;
  --slate-800:   #1E293B;
  --slate-900:   #0F172A;

  /* -----------------------------------------------------------
     SEMANTIC — status + signal colors
     ----------------------------------------------------------- */
  --signal-ok:       #22C55E;   /* green-500 */
  --signal-ok-soft:  #DCFCE7;   /* green-100 */
  --signal-warn:     #EAB308;   /* yellow-500 */
  --signal-alert:    #EF4444;   /* red-500 */
  --signal-info:     #3B82F6;

  /* Terminal palette (dark-surface monospace UI) */
  --term-bg:      #0F172A;
  --term-panel:   #1E293B;
  --term-border:  rgba(255, 255, 255, 0.10);
  --term-muted:   #94A3B8;
  --term-text:    #CBD5E1;
  --term-accent:  #60A5FA;
  --term-ok:      #4ADE80;

  /* -----------------------------------------------------------
     SEMANTIC TOKENS (fg, bg, border)
     ----------------------------------------------------------- */
  --fg-1:        var(--slate-900);   /* primary text */
  --fg-2:        var(--slate-600);   /* body copy   */
  --fg-3:        var(--slate-500);   /* secondary   */
  --fg-4:        var(--slate-400);   /* tertiary / hints */
  --fg-brand:    var(--kenosa-navy);
  --fg-on-brand: var(--white);

  --bg-1:        var(--white);
  --bg-2:        var(--slate-50);
  --bg-3:        var(--slate-100);
  --bg-dark:     var(--slate-900);
  --bg-brand:    var(--kenosa-navy);
  --bg-tint:     var(--blue-50);

  --border-1:    var(--slate-200);
  --border-2:    var(--slate-100);
  --border-brand-soft: rgba(0, 0, 128, 0.10);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display scale — tighter tracking, heavier weights */
  --size-display-xl: 4.5rem;   /* 72px — hero */
  --size-display-lg: 3.75rem;  /* 60px */
  --size-display-md: 3rem;     /* 48px — section headers */
  --size-display-sm: 2.25rem;  /* 36px */

  /* Body */
  --size-body-xl: 1.25rem;     /* 20px — hero lede */
  --size-body-lg: 1.125rem;    /* 18px */
  --size-body-md: 1rem;        /* 16px — default */
  --size-body-sm: 0.875rem;    /* 14px */
  --size-body-xs: 0.75rem;     /* 12px */

  /* Eyebrows / micro */
  --size-eyebrow: 0.75rem;     /* 12px — UPPERCASE, tracked */
  --size-micro:   0.625rem;    /* 10px — chips, badges */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --track-tight:  -0.02em;
  --track-normal:  0em;
  --track-wide:    0.08em;
  --track-eyebrow: 0.3em;   /* signature trademark of Kenosa */

  /* -----------------------------------------------------------
     SPACING, RADII, SHADOWS
     ----------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;   /* buttons */
  --radius-xl:  24px;   /* inner cards */
  --radius-2xl: 32px;   /* large cards */
  --radius-3xl: 40px;   /* hero panels, feature cards */
  --radius-pill: 999px;

  --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg:    0 12px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl:    0 25px 50px -12px rgba(0, 0, 128, 0.12);
  --shadow-brand: 0 20px 40px -10px rgba(0, 0, 128, 0.30);

  /* Grid-pattern background (signature dot grid) */
  --grid-pattern:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 128, 0.05) 1px, transparent 0);
  --grid-pattern-size: 40px 40px;

  /* Glass card */
  --glass-bg:     rgba(255, 255, 255, 0.70);
  --glass-border: rgba(255, 255, 255, 0.20);
  --glass-blur:   12px;
}

/* -------------------------------------------------------------
   SEMANTIC ELEMENT STYLES
   ------------------------------------------------------------- */

html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--size-body-md);
  line-height: var(--lh-normal);
}

h1, .h1 {
  font-size: var(--size-display-xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
  line-height: 0.95;
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--size-display-md);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-size: var(--size-display-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}
h5, .h5 {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

p, .p {
  font-size: var(--size-body-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.eyebrow {
  font-size: var(--size-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--kenosa-navy);
}

.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--size-micro);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background: var(--blue-100);
  color: var(--kenosa-navy);
  border: 1px solid var(--blue-200);
}

.grid-pattern {
  background-image: var(--grid-pattern);
  background-size: var(--grid-pattern-size);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

.tech-border {
  border: 1px solid var(--border-1);
  position: relative;
}
.tech-border::before,
.tech-border::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: var(--kenosa-navy);
  border-radius: 999px;
}
.tech-border::before { top: -4px; left: -4px; }
.tech-border::after  { bottom: -4px; right: -4px; }