/* =========================================================================
   EntruLabs Design System — Tokens
   Colors + Typography
   ========================================================================= */

/* ---------- Brand colors (sampled from logo) ------------------------- */
:root {
  /* Primary — deep secure navy (from "Entru" in the logo) */
  --el-navy-900: #000a4d;
  --el-navy-800: #011689;   /* PRIMARY BRAND NAVY — logo "Entru" */
  --el-navy-700: #0a25a8;
  --el-navy-600: #1e3ec2;
  --el-navy-500: #3857d6;
  --el-navy-400: #6a83e3;
  --el-navy-300: #a6b4ef;
  --el-navy-200: #d0d7f6;
  --el-navy-100: #e8ecfb;
  --el-navy-050: #f4f6fd;

  /* Accent — cyan (from "Labs" in the logo + diamond accent stroke) */
  --el-cyan-900: #0a5d75;
  --el-cyan-800: #137594;
  --el-cyan-700: #1f93b8;
  --el-cyan-600: #2aa8c8;
  --el-cyan-500: #40bcd8;   /* PRIMARY BRAND CYAN — logo "Labs" */
  --el-cyan-400: #6cceea;
  --el-cyan-300: #9addf1;
  --el-cyan-200: #c3ebf7;
  --el-cyan-100: #e1f5fb;
  --el-cyan-050: #f3fbfd;

  /* Neutrals — cool, slightly blue-tinted grays (reads as "enterprise") */
  --el-ink-1000: #05081c;
  --el-ink-900:  #0d1230;
  --el-ink-800:  #1a2141;
  --el-ink-700:  #2a3358;
  --el-ink-600:  #434c72;
  --el-ink-500:  #6b7393;
  --el-ink-400:  #939ab4;
  --el-ink-300:  #c0c5d6;
  --el-ink-200:  #dde1ec;
  --el-ink-100:  #eef0f6;
  --el-ink-050:  #f6f8fc;
  --el-white:    #ffffff;

  /* Semantic — security context (danger reads strongly; success reads quiet) */
  --el-danger-600:  #b4243a;
  --el-danger-500:  #d63b55;
  --el-danger-100:  #fde6ea;
  --el-warning-600: #b07800;
  --el-warning-500: #d99400;
  --el-warning-100: #fbf0d6;
  --el-success-600: #0f7a4c;
  --el-success-500: #1ba06a;
  --el-success-100: #dcf3e7;
  --el-info-600:    var(--el-cyan-700);
  --el-info-500:    var(--el-cyan-500);
  --el-info-100:    var(--el-cyan-100);

  /* Semantic roles — foreground / background / border */
  --el-fg-1: var(--el-ink-1000);  /* primary text */
  --el-fg-2: var(--el-ink-700);   /* secondary text */
  --el-fg-3: var(--el-ink-500);   /* tertiary / captions */
  --el-fg-4: var(--el-ink-400);   /* disabled / subdued */
  --el-fg-brand:      var(--el-navy-800);
  --el-fg-brand-alt:  var(--el-cyan-700);
  --el-fg-on-brand:   #ffffff;

  --el-bg-1: #ffffff;             /* page */
  --el-bg-2: var(--el-ink-050);   /* subtle section */
  --el-bg-3: var(--el-ink-100);   /* inset / well */
  --el-bg-brand:     var(--el-navy-800);
  --el-bg-brand-alt: var(--el-cyan-500);
  --el-bg-dark:      var(--el-ink-1000);

  --el-border-1: var(--el-ink-200);
  --el-border-2: var(--el-ink-300);
  --el-border-strong: var(--el-ink-700);
  --el-border-brand:  var(--el-navy-800);
  --el-focus-ring:    var(--el-cyan-500);

  /* ---------- Typography ----------------------------------------------- */
  /* The logo wordmark is a rounded, geometric sans (Nunito-family).
     Body uses Inter for UI clarity. Mono is JetBrains Mono for code/findings. */
  --el-font-display: "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --el-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --el-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — modest & enterprise-credible, not showy */
  --el-fs-display-xl: 72px;
  --el-fs-display-lg: 56px;
  --el-fs-display-md: 44px;
  --el-fs-h1: 40px;
  --el-fs-h2: 32px;
  --el-fs-h3: 24px;
  --el-fs-h4: 20px;
  --el-fs-h5: 18px;
  --el-fs-body-lg: 18px;
  --el-fs-body:    16px;
  --el-fs-body-sm: 14px;
  --el-fs-caption: 13px;
  --el-fs-micro:   12px;

  --el-lh-tight: 1.12;
  --el-lh-snug:  1.28;
  --el-lh-normal: 1.5;
  --el-lh-loose:  1.7;

  --el-fw-regular: 400;
  --el-fw-medium:  500;
  --el-fw-semibold: 600;
  --el-fw-bold:    700;
  --el-fw-extra:   800;
  --el-fw-black:   900;

  --el-tracking-tight: -0.02em;
  --el-tracking-snug:  -0.01em;
  --el-tracking-normal: 0;
  --el-tracking-wide:  0.04em;
  --el-tracking-eyebrow: 0.14em; /* ALL CAPS eyebrows */

  /* ---------- Spacing / radii / shadows -------------------------------- */
  --el-space-1: 4px;
  --el-space-2: 8px;
  --el-space-3: 12px;
  --el-space-4: 16px;
  --el-space-5: 24px;
  --el-space-6: 32px;
  --el-space-7: 48px;
  --el-space-8: 64px;
  --el-space-9: 96px;
  --el-space-10: 128px;

  --el-radius-xs: 4px;
  --el-radius-sm: 6px;
  --el-radius-md: 10px;
  --el-radius-lg: 14px;
  --el-radius-xl: 20px;
  --el-radius-2xl: 28px;
  --el-radius-pill: 999px;

  /* Shadows — soft, subtle; security brand wants to feel calm not flashy */
  --el-shadow-xs: 0 1px 2px rgba(5, 8, 28, 0.06);
  --el-shadow-sm: 0 2px 6px rgba(5, 8, 28, 0.08);
  --el-shadow-md: 0 8px 24px rgba(5, 8, 28, 0.08), 0 2px 6px rgba(5, 8, 28, 0.05);
  --el-shadow-lg: 0 20px 48px rgba(5, 8, 28, 0.12), 0 4px 12px rgba(5, 8, 28, 0.06);
  --el-shadow-brand: 0 10px 28px rgba(1, 22, 137, 0.22);
  --el-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Motion */
  --el-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --el-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --el-ease-in:       cubic-bezier(0.64, 0, 0.78, 0);
  --el-dur-fast:   120ms;
  --el-dur-base:   200ms;
  --el-dur-slow:   340ms;
}

/* =========================================================================
   Base — semantic elements wired to tokens
   ========================================================================= */

html, body {
  font-family: var(--el-font-body);
  font-size: var(--el-fs-body);
  line-height: var(--el-lh-normal);
  color: var(--el-fg-1);
  background: var(--el-bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--el-font-display);
  color: var(--el-fg-1);
  letter-spacing: var(--el-tracking-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--el-fs-h1); line-height: var(--el-lh-tight); font-weight: var(--el-fw-extra); }
h2 { font-size: var(--el-fs-h2); line-height: var(--el-lh-tight); font-weight: var(--el-fw-bold); }
h3 { font-size: var(--el-fs-h3); line-height: var(--el-lh-snug);  font-weight: var(--el-fw-bold); }
h4 { font-size: var(--el-fs-h4); line-height: var(--el-lh-snug);  font-weight: var(--el-fw-semibold); }
h5 { font-size: var(--el-fs-h5); line-height: var(--el-lh-snug);  font-weight: var(--el-fw-semibold); }

p { margin: 0; color: var(--el-fg-2); line-height: var(--el-lh-normal); text-wrap: pretty; }

small, .el-caption { font-size: var(--el-fs-caption); color: var(--el-fg-3); }

code, pre, kbd, samp {
  font-family: var(--el-font-mono);
  font-size: 0.92em;
}

code {
  background: var(--el-bg-3);
  color: var(--el-navy-800);
  padding: 2px 6px;
  border-radius: var(--el-radius-xs);
  border: 1px solid var(--el-border-1);
}

/* Eyebrow — small uppercase labels common across the brand */
.el-eyebrow {
  font-family: var(--el-font-body);
  font-size: var(--el-fs-micro);
  font-weight: var(--el-fw-semibold);
  letter-spacing: var(--el-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--el-cyan-700);
}

a { color: var(--el-navy-800); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--el-dur-fast) var(--el-ease-standard); }
a:hover { border-bottom-color: currentColor; }

::selection { background: var(--el-cyan-200); color: var(--el-navy-900); }