/* ==========================================================================
   InforceLeads design tokens, v1.3 (locked)
   --------------------------------------------------------------------------
   Dark mode is the default and lives on :root.
   Light mode is a full equal theme:
     - html[data-theme="light"] forces light
     - html[data-theme="dark"]  forces dark
     - no data-theme            follows prefers-color-scheme
   Light mode is canvas A: fog page (#ededed) with white cards. Locked
   10/12/2026. There is no second light canvas.
   Orange (--il-color-accent) is the character-image highlight and the optional
   accent button only. Buttons, focus rings, badges and marks are neutral.
   The blue accent is navy (#1b2a4a). Locked 10/12/2026. Its values live on
   :root and in the light blocks; there is no accent switch.
   The blue does four jobs: primary button hover (white label in both modes),
   active rail item and tab underline, link hover, and one optional blue band
   per page. The navy character stage uses the same blue, but as imagery, not
   a component job. Blue and orange never touch in the same component.
   The silver product stage and the white figure facet ramp are image
   treatments and do not change with the mode.
   Every token is prefixed --il-. Component CSS should only reference these.
   Contrast for every text/background pair is verified in contrast-report.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mode independent tokens (type, space, radius, motion, z, layout)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Fonts (placeholders, the font agent may swap the families) */
  --il-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --il-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --il-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

  /* Type sizes (mobile clamps on the large steps) */
  --il-size-eyebrow: 11px;
  --il-size-eyebrow-lg: 12px;
  --il-size-body-sm: 14px;
  --il-size-body: 16px;
  --il-size-body-lg: 18px;
  --il-size-h4: 20px;
  --il-size-h3: 24px;
  --il-size-h2: clamp(28px, 2.4vw + 20px, 32px);
  --il-size-h1: clamp(32px, 3vw + 22px, 40px);
  --il-size-display: clamp(40px, 5vw + 20px, 56px);
  --il-size-display-xl: clamp(44px, 7vw + 16px, 72px);

  /* Line heights */
  --il-leading-eyebrow: 1.4;
  --il-leading-body-sm: 1.55;
  --il-leading-body: 1.6;
  --il-leading-body-lg: 1.6;
  --il-leading-h4: 1.35;
  --il-leading-h3: 1.25;
  --il-leading-h2: 1.2;
  --il-leading-h1: 1.12;
  --il-leading-display: 1.05;
  --il-leading-display-xl: 1.0;

  /* Tracking (negative scales with size, eyebrow is wide) */
  --il-tracking-eyebrow: 0.08em;
  --il-tracking-body-sm: 0;
  --il-tracking-body: 0;
  --il-tracking-body-lg: -0.005em;
  --il-tracking-h4: -0.01em;
  --il-tracking-h3: -0.015em;
  --il-tracking-h2: -0.02em;
  --il-tracking-h1: -0.025em;
  --il-tracking-display: -0.03em;
  --il-tracking-display-xl: -0.035em;

  /* Spacing, 8px base */
  --il-space-1: 4px;
  --il-space-2: 8px;
  --il-space-3: 12px;
  --il-space-4: 16px;
  --il-space-6: 24px;
  --il-space-8: 32px;
  --il-space-12: 48px;
  --il-space-16: 64px;
  --il-space-24: 96px;
  --il-space-32: 128px;

  /* Layout */
  --il-page-max: 1200px;
  --il-page-wide: 1440px;
  --il-page-gutter: 16px;
  --il-section-gap: 64px;
  --il-card-padding: 24px;
  --il-grid-gap: 24px;
  --il-nav-height: 64px;
  --il-rail-width: 240px;

  /* Radius */
  --il-radius-none: 0px;
  --il-radius-sm: 4px;
  --il-radius-md: 12px;
  --il-radius-lg: 16px;

  /* Motion */
  --il-duration-fast: 150ms;
  --il-duration-base: 250ms;
  --il-duration-slow: 400ms;
  --il-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --il-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --il-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --il-stagger: 60ms;

  /* Z-index */
  --il-z-base: 0;
  --il-z-raised: 10;
  --il-z-sticky: 100;
  --il-z-rail: 200;
  --il-z-overlay: 900;
  --il-z-modal: 1000;
  --il-z-toast: 1100;

  /* Focus */
  --il-focus-width: 2px;
  --il-focus-offset: 2px;

  /* Label on any blue fill, every accent, both modes */
  --il-color-on-blue: #ffffff;

  /* Silver product stage, an image treatment, same in both modes */
  --il-stage-silver-center: #f2f3f5;
  --il-stage-silver-edge: #c4c7cc;
  --il-stage-silver-floor: #d5d8dc;
  --il-silver-stage-gradient: radial-gradient(ellipse at 50% 35%, #f2f3f5 0%, #dfe1e5 55%, #c4c7cc 100%);

  /* White figure facet ramp for flipped scenes (white figure on a dark or blue stage) */
  --il-char-light-facet-1: #d9dbe0;
  --il-char-light-facet-2: #e3e5e9;
  --il-char-light-facet-3: #eceef1;
  --il-char-light-facet-4: #f5f6f8;
  --il-char-light-facet-5: #ffffff;
}

@media (min-width: 768px) {
  :root {
    --il-page-gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --il-section-gap: 96px;
    --il-page-gutter: 32px;
  }
}

/* --------------------------------------------------------------------------
   2. Dark mode colors (default)
   -------------------------------------------------------------------------- */
:root {
  /* Canvas and surfaces, tone separated, no borders needed */
  --il-color-canvas: #0c0d10;
  --il-color-surface-1: #15171b;   /* cards */
  --il-color-surface-2: #1d2026;   /* panels, nested cards, table header */
  --il-color-surface-3: #262a31;   /* hover rows, active tabs */
  --il-color-surface-input: #262a31;
  --il-color-surface-inverse: #ffffff;

  /* Text, always white family on dark */
  --il-color-text: #ffffff;
  --il-color-text-2: #b6bac2;
  --il-color-text-3: #8e939c;
  --il-color-text-disabled: #5f656f;
  --il-color-text-inverse: #111214;

  /* Borders, hairlines at low alpha */
  --il-color-border: rgba(255, 255, 255, 0.08);
  --il-color-border-strong: rgba(255, 255, 255, 0.16);
  --il-color-border-input: rgba(255, 255, 255, 0.14);

  /* Primary button: neutral and inverse (white on dark, black on light) */
  --il-color-primary: #ffffff;
  --il-color-primary-hover: #e4e4e4;
  --il-color-primary-active: #cfcfcf;
  --il-color-on-primary: #0c0d10;

  /* Focus ring, same color as the primary fill */
  --il-color-focus: #ffffff;

  /* Accent orange: character highlight and the optional accent button only */
  --il-color-accent: #f35b22;
  --il-color-accent-hover: #ff6a33;
  --il-color-accent-active: #dc4e17;
  --il-color-on-accent: #0c0d10;       /* label on an orange fill */

  /* Semantic, muted, dashboard only */
  --il-color-success: #5fcf8a;
  --il-color-success-bg: #10281a;
  --il-color-warning: #e9b84f;
  --il-color-warning-bg: #2b2210;
  --il-color-danger: #f27d7d;
  --il-color-danger-bg: #2e1414;
  --il-color-info: #7fb5ea;
  --il-color-info-bg: #111f30;

  /* Lead status badges */
  --il-badge-new-fg: #ffffff;
  --il-badge-new-bg: #262a31;
  --il-badge-contacted-fg: #7fb5ea;
  --il-badge-contacted-bg: #111f30;
  --il-badge-sold-fg: #5fcf8a;
  --il-badge-sold-bg: #10281a;
  --il-badge-exclusive-fg: #0c0d10;
  --il-badge-exclusive-bg: #ffffff;
  --il-badge-shared-fg: #b6bac2;
  --il-badge-shared-bg: #262a31;

  /* Low-poly characters: facet ramp from shadow to lit, plus the stage */
  --il-char-facet-1: #1c1f24;
  --il-char-facet-2: #262a30;
  --il-char-facet-3: #31363d;
  --il-char-facet-4: #3d434b;
  --il-char-facet-5: #4a5059;
  --il-char-edge: rgba(255, 255, 255, 0.06);
  --il-char-accent-shadow: #c7420f;
  --il-char-accent: #f35b22;
  --il-char-accent-light: #ff7a45;
  --il-stage-back: #0e1014;
  --il-stage-floor: #121419;
  --il-stage-floor-lit: #181b21;
  --il-stage-contact-shadow: rgba(0, 0, 0, 0.55);

  /* Overlays and scrims */
  --il-color-scrim: rgba(12, 13, 16, 0.72);
  --il-hero-gradient: linear-gradient(to bottom, rgba(12, 13, 16, 0) 35%, #0c0d10 100%);
  --il-hero-scrim-top: linear-gradient(to bottom, rgba(12, 13, 16, 0.72) 0%, rgba(12, 13, 16, 0.25) 40%, rgba(12, 13, 16, 0) 60%);
  --il-hero-scrim-left: linear-gradient(to right, rgba(12, 13, 16, 0.78) 0%, rgba(12, 13, 16, 0.35) 45%, rgba(12, 13, 16, 0) 70%);
  --il-nav-bg: rgba(12, 13, 16, 0.78);

  /* Shadows, quiet; cards get none */
  --il-shadow-nav: 0 1px 0 rgba(255, 255, 255, 0.06);
  --il-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --il-shadow-toast: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);

  /* Blue accent, navy (locked). Panel and band fill, primary button hover,
     small text and links, 12% tint, and the blue stage */
  --il-color-blue: #1b2a4a;
  --il-color-blue-hover: #1b2a4a;
  --il-color-blue-text: #8fa6d1;
  --il-color-blue-tint: rgba(143, 166, 209, 0.12);
  --il-stage-blue-back: #10192e;
  --il-stage-blue-floor: #1b2a4a;
  --il-stage-blue-floor-lit: #2a3d63;
}

/* --------------------------------------------------------------------------
   3. Light mode colors (canvas A, fog: gray page, white cards)
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --il-color-canvas: #ededed;
  --il-color-surface-1: #ffffff;
  --il-color-surface-2: #f5f5f5;
  --il-color-surface-3: #e4e4e4;
  --il-color-surface-input: #ffffff;
  --il-color-surface-inverse: #0c0d10;

  --il-color-text: #111214;
  --il-color-text-2: #4b4f57;
  --il-color-text-3: #5e636b;
  --il-color-text-disabled: #a1a5ad;
  --il-color-text-inverse: #ffffff;

  --il-color-border: rgba(17, 18, 20, 0.10);
  --il-color-border-strong: rgba(17, 18, 20, 0.20);
  --il-color-border-input: rgba(17, 18, 20, 0.22);

  --il-color-primary: #111214;
  --il-color-primary-hover: #2a2b2f;
  --il-color-primary-active: #000000;
  --il-color-on-primary: #ffffff;

  --il-color-focus: #111214;

  --il-color-accent: #f35b22;
  --il-color-accent-hover: #e5521a;
  --il-color-accent-active: #dc4c15;
  --il-color-on-accent: #111214;

  --il-color-success: #1e6b3a;
  --il-color-success-bg: #e3f3e8;
  --il-color-warning: #7a5200;
  --il-color-warning-bg: #fbf0d6;
  --il-color-danger: #b42318;
  --il-color-danger-bg: #fde8e6;
  --il-color-info: #1b5ea6;
  --il-color-info-bg: #e3eefb;

  --il-badge-new-fg: #111214;
  --il-badge-new-bg: #e4e4e4;
  --il-badge-contacted-fg: #1b5ea6;
  --il-badge-contacted-bg: #e3eefb;
  --il-badge-sold-fg: #1e6b3a;
  --il-badge-sold-bg: #e3f3e8;
  --il-badge-exclusive-fg: #ffffff;
  --il-badge-exclusive-bg: #111214;
  --il-badge-shared-fg: #4b4f57;
  --il-badge-shared-bg: #e4e4e4;

  /* Same figures on a light stage, facets a step deeper so they hold shape */
  --il-char-facet-1: #3a3f47;
  --il-char-facet-2: #474d56;
  --il-char-facet-3: #555c66;
  --il-char-facet-4: #646b75;
  --il-char-facet-5: #737b85;
  --il-char-edge: rgba(17, 18, 20, 0.08);
  --il-char-accent-shadow: #c7420f;
  --il-char-accent: #f35b22;
  --il-char-accent-light: #ff7a45;
  --il-stage-back: #e4e4e4;
  --il-stage-floor: #dedede;
  --il-stage-floor-lit: #e9e9e9;
  --il-stage-contact-shadow: rgba(17, 18, 20, 0.18);

  --il-color-scrim: rgba(17, 18, 20, 0.55);
  /* Hero chapters stay dark imagery with white text in both modes; in light mode the shadow stays dark and the chapter ends on a hard edge against the light canvas */
  --il-hero-gradient: linear-gradient(to bottom, rgba(12, 13, 16, 0) 35%, rgba(12, 13, 16, 0.82) 100%);
  --il-hero-scrim-top: linear-gradient(to bottom, rgba(12, 13, 16, 0.72) 0%, rgba(12, 13, 16, 0.25) 40%, rgba(12, 13, 16, 0) 60%);
  --il-hero-scrim-left: linear-gradient(to right, rgba(12, 13, 16, 0.78) 0%, rgba(12, 13, 16, 0.35) 45%, rgba(12, 13, 16, 0) 70%);
  --il-nav-bg: rgba(237, 237, 237, 0.85);

  --il-shadow-nav: 0 1px 0 rgba(17, 18, 20, 0.08);
  --il-shadow-overlay: 0 16px 40px rgba(17, 18, 20, 0.16), 0 0 0 1px rgba(17, 18, 20, 0.08);
  --il-shadow-toast: 0 8px 24px rgba(17, 18, 20, 0.14), 0 0 0 1px rgba(17, 18, 20, 0.08);

  /* Blue accent, navy (locked), light values. Text uses the panel blue itself;
     the tint is 10% of it on the light canvas. */
  --il-color-blue: #1b2a4a;
  --il-color-blue-hover: #1b2a4a;
  --il-color-blue-text: #1b2a4a;
  --il-color-blue-tint: rgba(27, 42, 74, 0.10);
  --il-stage-blue-back: #10192e;
  --il-stage-blue-floor: #1b2a4a;
  --il-stage-blue-floor-lit: #2a3d63;
}

/* --------------------------------------------------------------------------
   4. System preference fallback when no data-theme is set
   Keep this block identical to section 3.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --il-color-canvas: #ededed;
    --il-color-surface-1: #ffffff;
    --il-color-surface-2: #f5f5f5;
    --il-color-surface-3: #e4e4e4;
    --il-color-surface-input: #ffffff;
    --il-color-surface-inverse: #0c0d10;

    --il-color-text: #111214;
    --il-color-text-2: #4b4f57;
    --il-color-text-3: #5e636b;
    --il-color-text-disabled: #a1a5ad;
    --il-color-text-inverse: #ffffff;

    --il-color-border: rgba(17, 18, 20, 0.10);
    --il-color-border-strong: rgba(17, 18, 20, 0.20);
    --il-color-border-input: rgba(17, 18, 20, 0.22);

    --il-color-primary: #111214;
    --il-color-primary-hover: #2a2b2f;
    --il-color-primary-active: #000000;
    --il-color-on-primary: #ffffff;

    --il-color-focus: #111214;

    --il-color-accent: #f35b22;
    --il-color-accent-hover: #e5521a;
    --il-color-accent-active: #dc4c15;
    --il-color-on-accent: #111214;

    --il-color-success: #1e6b3a;
    --il-color-success-bg: #e3f3e8;
    --il-color-warning: #7a5200;
    --il-color-warning-bg: #fbf0d6;
    --il-color-danger: #b42318;
    --il-color-danger-bg: #fde8e6;
    --il-color-info: #1b5ea6;
    --il-color-info-bg: #e3eefb;

    --il-badge-new-fg: #111214;
    --il-badge-new-bg: #e4e4e4;
    --il-badge-contacted-fg: #1b5ea6;
    --il-badge-contacted-bg: #e3eefb;
    --il-badge-sold-fg: #1e6b3a;
    --il-badge-sold-bg: #e3f3e8;
    --il-badge-exclusive-fg: #ffffff;
    --il-badge-exclusive-bg: #111214;
    --il-badge-shared-fg: #4b4f57;
    --il-badge-shared-bg: #e4e4e4;

    --il-char-facet-1: #3a3f47;
    --il-char-facet-2: #474d56;
    --il-char-facet-3: #555c66;
    --il-char-facet-4: #646b75;
    --il-char-facet-5: #737b85;
    --il-char-edge: rgba(17, 18, 20, 0.08);
    --il-char-accent-shadow: #c7420f;
    --il-char-accent: #f35b22;
    --il-char-accent-light: #ff7a45;
    --il-stage-back: #e4e4e4;
    --il-stage-floor: #dedede;
    --il-stage-floor-lit: #e9e9e9;
    --il-stage-contact-shadow: rgba(17, 18, 20, 0.18);

    --il-color-scrim: rgba(17, 18, 20, 0.55);
    --il-hero-gradient: linear-gradient(to bottom, rgba(12, 13, 16, 0) 35%, rgba(12, 13, 16, 0.82) 100%);
    --il-hero-scrim-top: linear-gradient(to bottom, rgba(12, 13, 16, 0.72) 0%, rgba(12, 13, 16, 0.25) 40%, rgba(12, 13, 16, 0) 60%);
    --il-hero-scrim-left: linear-gradient(to right, rgba(12, 13, 16, 0.78) 0%, rgba(12, 13, 16, 0.35) 45%, rgba(12, 13, 16, 0) 70%);
    --il-nav-bg: rgba(237, 237, 237, 0.85);

    --il-shadow-nav: 0 1px 0 rgba(17, 18, 20, 0.08);
    --il-shadow-overlay: 0 16px 40px rgba(17, 18, 20, 0.16), 0 0 0 1px rgba(17, 18, 20, 0.08);
    --il-shadow-toast: 0 8px 24px rgba(17, 18, 20, 0.14), 0 0 0 1px rgba(17, 18, 20, 0.08);

    /* Blue accent, navy (locked), light values. Text uses the panel blue itself;
       the tint is 10% of it on the light canvas. */
    --il-color-blue: #1b2a4a;
    --il-color-blue-hover: #1b2a4a;
    --il-color-blue-text: #1b2a4a;
    --il-color-blue-tint: rgba(27, 42, 74, 0.10);
    --il-stage-blue-back: #10192e;
    --il-stage-blue-floor: #1b2a4a;
    --il-stage-blue-floor-lit: #2a3d63;
  }
}

/* --------------------------------------------------------------------------
   5. Base element styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--il-color-canvas);
}

body {
  margin: 0;
  background: var(--il-color-canvas);
  color: var(--il-color-text);
  font-family: var(--il-font-body);
  font-size: var(--il-size-body);
  line-height: var(--il-leading-body);
  letter-spacing: var(--il-tracking-body);
  font-weight: var(--il-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "calt" 0, "liga" 0;
}

h1, h2, h3, h4, .il-display, .il-display-xl {
  margin: 0;
  font-family: var(--il-font-display);
  font-weight: var(--il-weight-semibold);
  color: var(--il-color-text);
  text-wrap: balance;
}

.il-display-xl { font-size: var(--il-size-display-xl); line-height: var(--il-leading-display-xl); letter-spacing: var(--il-tracking-display-xl); }
.il-display    { font-size: var(--il-size-display);    line-height: var(--il-leading-display);    letter-spacing: var(--il-tracking-display); }
h1, .il-h1     { font-size: var(--il-size-h1);         line-height: var(--il-leading-h1);         letter-spacing: var(--il-tracking-h1); }
h2, .il-h2     { font-size: var(--il-size-h2);         line-height: var(--il-leading-h2);         letter-spacing: var(--il-tracking-h2); }
h3, .il-h3     { font-size: var(--il-size-h3);         line-height: var(--il-leading-h3);         letter-spacing: var(--il-tracking-h3); }
h4, .il-h4     { font-size: var(--il-size-h4);         line-height: var(--il-leading-h4);         letter-spacing: var(--il-tracking-h4); font-weight: var(--il-weight-medium); }

p { margin: 0 0 var(--il-space-4); }
p:last-child { margin-bottom: 0; }

.il-body-lg { font-size: var(--il-size-body-lg); line-height: var(--il-leading-body-lg); letter-spacing: var(--il-tracking-body-lg); }
.il-body    { font-size: var(--il-size-body);    line-height: var(--il-leading-body); }
.il-body-sm { font-size: var(--il-size-body-sm); line-height: var(--il-leading-body-sm); }
.il-muted   { color: var(--il-color-text-2); }
.il-quiet   { color: var(--il-color-text-3); }

/* Eyebrow: mono, uppercase, tracked */
.il-eyebrow {
  font-family: var(--il-font-mono);
  font-size: var(--il-size-eyebrow);
  line-height: var(--il-leading-eyebrow);
  letter-spacing: var(--il-tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--il-weight-medium);
  color: var(--il-color-text-3);
}

/* Links: same color as text, blue text and underline on hover. No orange links. */
a {
  color: var(--il-color-text);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--il-duration-fast) var(--il-ease-out);
}
a:hover { color: var(--il-color-blue-text); text-decoration: underline; }

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

hr {
  border: 0;
  border-top: 1px solid var(--il-color-border);
  margin: var(--il-space-8) 0;
}

img, video, svg { display: block; max-width: 100%; }

::selection {
  background: var(--il-color-text);
  color: var(--il-color-canvas);
}

/* Focus ring: neutral (white on dark, ink on light), visible on keyboard focus only. Never blue. */
:focus { outline: none; }
:focus-visible {
  outline: var(--il-focus-width) solid var(--il-color-focus);
  outline-offset: var(--il-focus-offset);
  border-radius: var(--il-radius-sm);
}

/* Layout helpers */
.il-container {
  width: 100%;
  max-width: var(--il-page-max);
  margin-inline: auto;
  padding-inline: var(--il-page-gutter);
}
.il-container--wide { max-width: var(--il-page-wide); }
.il-section { padding-block: var(--il-section-gap); }
.il-bleed { width: 100%; margin-inline: 0; border-radius: var(--il-radius-none); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --il-duration-fast: 0ms;
    --il-duration-base: 0ms;
    --il-duration-slow: 0ms;
    --il-stagger: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}