/* Base palette — values verbatim from @innobrain/design-kit@0.1.0. */
:root{
  /* Innobrain Blue — brand core voice: links, interaction, primary action. */
  --inno-blue:#2386df;
  --inno-blue-dark:#1a69b0;
  /* Innorange — the signal color: CTAs, tags, eyebrows, checkmarks, dark-card accent. */
  --inno-orange:#fe9f43;
  --inno-orange-dark:#fe830b;
  /* Brand near-black — statement sections and heading text. */
  --inno-dark:#0c0a09;
  --inno-white:#ffffff;

  /* Stone ramp — the only neutral. Warm-grey, never a blue-grey. */
  --inno-stone-50:#fafaf9;
  --inno-stone-100:#f5f5f4;
  --inno-stone-200:#e7e5e4;
  --inno-stone-300:#d6d3d1;
  --inno-stone-600:#57534e;
  --inno-stone-700:#44403c;
  --inno-stone-900:#1c1917;
  --inno-stone-950:#0c0a09;

  /* Derived transparencies used by the kit's sanctioned patterns. */
  --inno-blue-wash:rgba(35,134,223,0.12);
  --inno-orange-wash:rgba(254,159,67,0.18);
  --inno-focus-ring:rgba(35,134,223,0.25);
  --inno-glow-orange:radial-gradient(circle,rgba(254,159,67,0.28) 0%,rgba(254,159,67,0) 70%); /* @kind color */
}

/* One typeface, spoken at different volumes. Hierarchy = weight + size, never a second face. */
:root{
  --inno-font:"Manrope Variable","Manrope",ui-sans-serif,system-ui,sans-serif;

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

  /* Heading scale — fluid clamps, exactly as the Heading component computes them. */
  --inno-size-display:clamp(1.875rem,1.2rem + 3.2vw,3.75rem); /* size="xl" */
  --inno-size-headline:clamp(1.25rem,0.9rem + 1.6vw,2.25rem); /* size="lg" */
  --inno-size-title:clamp(1.125rem,1rem + 0.4vw,1.25rem);     /* size="md" */
  --inno-size-base:1.125rem;                                   /* size="base" */

  --inno-leading-display:1.1;
  --inno-leading-headline:1.25;
  --inno-leading-title:1.25;
  --inno-leading-body:1.6;
  --inno-tracking-display:-0.025em;
  --inno-tracking-eyebrow:0.1em;

  /* Text roles below the heading scale. */
  --inno-size-lead:1.0625rem;
  --inno-size-body:1rem;
  --inno-size-small:0.9375rem;
  --inno-size-label:0.875rem;
  --inno-size-tag:0.8125rem;
  --inno-size-eyebrow:0.75rem;
}

/* Two shapes only: the 24px rounded rectangle and the full pill. */
:root{
  --inno-radius-card:1.5rem;    /* 24px — cards, modals */
  --inno-radius-section:2rem;   /* 32px — painted section shells */
  --inno-radius-pill:9999px;    /* buttons, inputs, tags, eyebrow chips */
  --inno-radius-media:1rem;     /* 16px — media wells nested inside a card */
  --inno-radius-icon:0.75rem;   /* 12px — small icon tiles */
}

@font-face{font-family:"Manrope Variable";font-weight:200 800;font-display:swap;src:url("/manrope-latin.woff2") format("woff2")}