/* =====================================================================
   OpsLabs.AI - Core design tokens
   --------------------------------------------------------------------
   Source: OpsLabs.fig (Final Design landing page).
   Primary face: Inter (Regular / Medium / SemiBold / Bold).
   Secondary face: Geist (Light / Regular / Medium / SemiBold).
   ===================================================================== */

/* Self-contained font stack - Inter & Geist variable fonts.
   Variable fonts cover all weights in a single file. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter.var.woff2") format("woff2-variations"),
       url("fonts/Inter.var.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist.var.woff2") format("woff2-variations"),
       url("fonts/Geist.var.woff2") format("woff2");
}
/* Geist Mono - pending upload. Until fonts/GeistMono.var.woff2 exists, the
   --ops-font-mono fallback stack (ui-monospace, SF Mono, Menlo...) renders. */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/GeistMono.var.woff2") format("woff2-variations"),
       url("fonts/GeistMono.var.woff2") format("woff2");
}

:root {
  /* ---------- Brand / Accent ---------- */
  /* The hero CTA blue. Seen on "Automation audit" button,
     icon tile gradients, the circular logo "lens" illustration. */
  --ops-blue-600: rgb(36, 104, 255);    /* deepest, pressed / link */
  --ops-blue-500: rgb(82, 134, 255);    /* core brand (gradient top) */
  --ops-blue-500-alt: rgb(80, 133, 255);/* near-duplicate used on icons */
  --ops-blue-450: rgb(88, 138, 255);    /* default hero CTA fill */
  --ops-blue-400: rgb(92, 141, 255);    /* top stop of many gradients */
  --ops-blue-350: rgb(73, 128, 255);    /* bottom stop of CTA gradient */
  --ops-blue-300: rgb(75, 122, 231);    /* muted / stroked icons */
  --ops-blue-200: rgb(204, 219, 255);   /* chip border */
  --ops-blue-150: rgb(219, 230, 255);   /* pale rule / chip border */
  --ops-blue-100: rgb(235, 242, 255);   /* selected row / chip bg */
  --ops-blue-75:  rgb(244, 250, 255);   /* section wash */
  --ops-blue-50:  rgb(250, 252, 255);   /* card subtle wash */
  --ops-blue-25:  rgb(250, 251, 255);   /* page tint */

  /* Brand gradient - CTA buttons + the round "lens" logo badge. */
  --ops-cta-gradient: linear-gradient(180deg, var(--ops-blue-400) 0%, var(--ops-blue-350) 100%);
  --ops-logo-gradient: linear-gradient(180deg, var(--ops-blue-500) 0%, var(--ops-blue-600) 100%);

  /* ---------- Neutrals ---------- */
  --ops-black: rgb(0, 0, 0);                 /* logo, headings, body */
  --ops-ink-80: rgba(0, 0, 0, 0.80);
  --ops-ink-66: rgba(0, 0, 0, 0.66);         /* body copy / subtitles */
  --ops-ink-50: rgba(0, 0, 0, 0.50);         /* captions, meta */
  --ops-ink-25: rgba(0, 0, 0, 0.25);         /* disabled */
  --ops-ink-10: rgba(0, 0, 0, 0.10);

  --ops-white: rgb(255, 255, 255);
  --ops-white-fade: rgb(252, 252, 252);      /* card inner wash */
  --ops-white-soft: rgb(253, 253, 253);      /* hero container bg */
  --ops-fog: rgb(254, 254, 255);             /* page bg */

  /* Grey scale (mapped from Figma metadata rank-order) */
  --ops-grey-50:  rgb(252, 252, 252);
  --ops-grey-75:  rgb(250, 251, 255);
  --ops-grey-100: rgb(244, 245, 248);        /* "pill" bg behind FAQ question */
  --ops-grey-150: rgb(244, 244, 245);        /* nav divider / try-demo btn */
  --ops-grey-200: rgb(243, 244, 247);        /* section bg ("Trusted by" band) */
  --ops-grey-250: rgb(242, 244, 248);        /* grid stroke */
  --ops-grey-300: rgb(239, 241, 246);
  --ops-grey-350: rgb(236, 238, 244);
  --ops-grey-400: rgb(234, 241, 255);        /* FAQ card border */
  --ops-grey-450: rgb(229, 232, 240);        /* CANONICAL hairline border */
  --ops-grey-500: rgb(229, 229, 229);
  --ops-grey-600: rgb(217, 217, 217);

  /* Canonical semantic border - used on nearly every card + section frame. */
  --ops-border: var(--ops-grey-450);
  --ops-border-faint: var(--ops-grey-250);
  --ops-divider: var(--ops-grey-150);

  /* ---------- Surfaces ---------- */
  --ops-bg: var(--ops-fog);
  --ops-bg-alt: var(--ops-grey-200);          /* band sections */
  --ops-bg-card: var(--ops-white);
  --ops-bg-elevated: var(--ops-white-fade);
  --ops-bg-blue-wash: rgb(240, 244, 255);     /* illustration panel */

  /* ---------- Foreground (semantic) ---------- */
  --ops-fg: var(--ops-black);
  --ops-fg-muted: var(--ops-ink-66);
  --ops-fg-subtle: var(--ops-ink-50);
  --ops-fg-disabled: var(--ops-ink-25);
  --ops-fg-on-brand: var(--ops-white);
  --ops-fg-link: var(--ops-blue-600);

  /* ---------- Shadows (from icon tiles + FAQ + CTAs) ---------- */
  --ops-shadow-card: 0 3.33px 6.67px rgba(0, 0, 0, 0.02);
  --ops-shadow-icon: 0 5px 10px rgba(0, 30, 101, 0.20);
  --ops-shadow-soft: 0 8px 24px rgba(14, 30, 68, 0.10);
  --ops-shadow-inset-highlight: inset 0 2.94px 5.88px rgba(0, 0, 0, 0.10),
                                 inset 0 -2.94px 2.94px rgba(255, 255, 255, 0.50);
  --ops-shadow-cta-glow: 0 21px 42px rgba(82, 134, 255, 0.60);
  --ops-shadow-elev-soft: 0 5.88px 11.76px rgba(19, 51, 127, 0.13);
  --ops-shadow-btn-inset: inset 0 1.67px 0.83px rgba(255, 255, 255, 0.25),
                          inset 0 0.83px 0 rgb(73, 128, 255),
                          inset 0 -0.83px 1.67px rgba(0, 0, 0, 0.10);

  /* ---------- Radii ---------- */
  --ops-radius-xs: 4px;
  --ops-radius-sm: 8px;
  --ops-radius-md: 12px;
  --ops-radius-lg: 16px;
  --ops-radius-xl: 20px;                      /* FAQ cards */
  --ops-radius-2xl: 28px;                     /* icon tiles (scaled) */
  --ops-radius-pill: 999px;

  /* ---------- Spacing (8-pt base, Figma used 4/8/16/24/40/80 rhythm) ---------- */
  --ops-space-1: 4px;
  --ops-space-2: 8px;
  --ops-space-3: 12px;
  --ops-space-4: 16px;
  --ops-space-5: 20px;
  --ops-space-6: 24px;
  --ops-space-8: 32px;
  --ops-space-10: 40px;
  --ops-space-12: 48px;
  --ops-space-16: 64px;
  --ops-space-20: 80px;
  --ops-space-24: 96px;

  /* ---------- Typography - FAMILIES ---------- */
  --ops-font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ops-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ops-font-utility: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif; /* mono-ish UI chrome */
  --ops-font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Typography - FLUID TYPE SCALE (desktop) ---------- */
  /* Inter Medium sizes observed: 80 (section H1), 48 (page H1 small),
     30 (card H3), 26.67 (body large), 20 (row), 16 (body), 14 (meta). */
  --ops-text-display-xl: 80px;     /* section title, -0.05em, lh 1.2 */
  --ops-text-display-lg: 48px;
  --ops-text-display-md: 40px;
  --ops-text-h1: 32px;
  --ops-text-h2: 30px;
  --ops-text-h3: 26.67px;
  --ops-text-h4: 20px;
  --ops-text-body-lg: 18px;
  --ops-text-body: 16px;
  --ops-text-body-sm: 14px;
  --ops-text-caption: 12px;
  --ops-text-micro: 11.4px;        /* Geist Regular 11.4px found 120× */

  --ops-lh-tight: 1.0;     /* @kind other */
  --ops-lh-display: 1.2;   /* @kind other */
  --ops-lh-snug: 1.25;     /* @kind other */
  --ops-lh-body: 1.4;      /* @kind other */
  --ops-lh-relaxed: 1.5;   /* @kind other */

  --ops-tracking-display: -0.05em;  /* all large Inter headings */
  --ops-tracking-tight: -0.04em;    /* OPS LABS wordmark */
  --ops-tracking-body: -0.02em;     /* button labels, Geist utility */
  --ops-tracking-none: 0em;
}

/* =====================================================================
   Semantic element defaults
   ===================================================================== */
body {
  font-family: var(--ops-font-body);
  color: var(--ops-fg);
  background: var(--ops-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .ops-h1 {
  font-family: var(--ops-font-display);
  font-weight: 500;                 /* Figma section titles are Inter Medium */
  font-size: var(--ops-text-display-xl);
  line-height: var(--ops-lh-display);
  letter-spacing: var(--ops-tracking-display);
  color: var(--ops-fg);
  margin: 0;
}
h2, .ops-h2 {
  font-family: var(--ops-font-display);
  font-weight: 500;
  font-size: var(--ops-text-display-lg);
  line-height: var(--ops-lh-display);
  letter-spacing: var(--ops-tracking-display);
  color: var(--ops-fg);
  margin: 0;
}
h3, .ops-h3 {
  font-family: var(--ops-font-display);
  font-weight: 500;
  font-size: var(--ops-text-h2);
  line-height: var(--ops-lh-display);
  letter-spacing: -0.02em;
  color: var(--ops-fg);
  margin: 0;
}
h4, .ops-h4 {
  font-family: var(--ops-font-display);
  font-weight: 500;
  font-size: var(--ops-text-h4);
  line-height: var(--ops-lh-snug);
  color: var(--ops-fg);
  margin: 0;
}
p, .ops-p {
  font-family: var(--ops-font-body);
  font-weight: 400;
  font-size: var(--ops-text-body);
  line-height: var(--ops-lh-body);
  color: var(--ops-fg-muted);
  margin: 0;
}
.ops-lead {
  font-size: var(--ops-text-h3);
  line-height: var(--ops-lh-body);
  color: var(--ops-fg-muted);
}
.ops-caption,
small {
  font-family: var(--ops-font-utility);
  font-size: var(--ops-text-caption);
  letter-spacing: var(--ops-tracking-body);
  color: var(--ops-fg-subtle);
}
.ops-eyebrow {
  font-family: var(--ops-font-utility);
  font-weight: 500;
  font-size: var(--ops-text-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ops-blue-600);
}
.ops-wordmark {
  font-family: var(--ops-font-display);
  font-weight: 700;
  letter-spacing: var(--ops-tracking-tight);
  line-height: 0.8;
  text-transform: uppercase;
}
code, .ops-code {
  font-family: var(--ops-font-mono);
  font-size: 0.925em;
}