/* ==========================================================================
   Design tokens — ported 1:1 from the React app's src/styles/globals.css
   Tailwind @theme block. Do not "improve" these values; they are the source
   of truth for visual parity with the original site.
   ========================================================================== */

:root {
  /* Fonts (same Google Fonts as the React app: Inter + Manrope), both
     loaded as variable fonts (inc/enqueue.php) so intermediate weights
     render true instead of snapping to the nearest static instance. */
  --te-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --te-font-display: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  --te-font-heading: var(--te-font-display);
  --te-font-body: var(--te-font-sans);

  /* ---------------------------------------------------------------------
     Type system — measured against the "Frame 118" reference by comparing
     rendered ink density (stroke weight) of each text role with the
     reference crops; see CHANGELOG_GAP_FIXES.md, Part D.
     --------------------------------------------------------------------- */
  --te-fw-light: 340;      /* large body copy (≥19px at 1920): leads, descriptions */
  --te-fw-regular: 400;    /* default body text, small sizes */
  --te-fw-medium: 500;     /* buttons, pills, eyebrows on dark */
  --te-fw-semibold: 600;   /* nav, eyebrows, labels */
  --te-fw-bold: 700;       /* card/feature/post titles, headings on dark bands */
  --te-fw-extrabold: 800;  /* large display headings on light backgrounds */

  /* Role aliases — components use these, not the raw steps above. */
  --te-fw-body: var(--te-fw-regular);
  --te-fw-body-lg: var(--te-fw-light);
  --te-fw-button: var(--te-fw-medium);
  --te-fw-eyebrow: var(--te-fw-semibold);
  --te-fw-label: var(--te-fw-semibold);
  --te-fw-title: var(--te-fw-bold);
  --te-fw-heading: var(--te-fw-bold);
  --te-fw-display: var(--te-fw-extrabold);
  --te-fw-display-dark: var(--te-fw-bold);

  /* Reference sizes in px at the 1920 frame (unitless, used as
     calc(var(--te-fs-*) * var(--u)) with a clamp floor in home.css). */
  --te-fs-hero: 72;
  --te-fs-h2-xl: 72;      /* What Sets Us Apart */
  --te-fs-h2-lg: 64;      /* Who We Are, Latest Updates, closing CTA */
  --te-fs-h2: 58;         /* dark bands: stats, services, how we work */
  --te-fs-h2-sm: 46;      /* Industries panel */
  --te-fs-title-lg: 34;   /* featured post */
  --te-fs-title: 26;      /* feature / service-card / row-post titles */
  --te-fs-title-sm: 23;   /* process steps, Who We Are highlights */
  --te-fs-lead: 25;       /* intro paragraphs */
  --te-fs-body-lg: 20;    /* card / feature descriptions */
  --te-fs-label: 18;      /* eyebrows, step labels, industry labels */

  --te-lh-tight: 1.1;     /* display headings */
  --te-lh-heading: 1.25;  /* titles */
  --te-lh-body: 1.55;     /* paragraphs */
  --te-ls-display: -0.015em;
  --te-ls-eyebrow: 0.16em;

  /* Text colours (measured from the reference; body copy is slate-blue,
     not neutral grey). */
  --te-text-heading: #070f24;
  --te-text-title: #070d26;
  --te-text-lead: #182036;
  --te-text-body: #2e3858;
  --te-text-muted: #3e4866;
  --te-text-soft: #5a6076;  /* captions on photo panels (Industries) */
  --te-text-on-dark: #ffffff;
  --te-text-on-dark-muted: #b4c3e2;
  --te-eyebrow-on-dark: #a2b3da;
  --te-eyebrow-orange: #e8890f;
  --te-pill-text: #0a58cc;
  --te-ink-blue: #0b2a52;   /* text on white pill buttons ("View all") */

  /* ---------------------------------------------------------------------
     Light design system (About Us "About Us_1" reference) — shared by every
     inner-page banner, section heading, card and CTA band.
     --------------------------------------------------------------------- */
  --te-ds-page-bg: #f8fcfd;           /* pale section background */
  --te-ds-page-bg-2: #f2f9fb;         /* alternate pale band */
  --te-ds-navy-1: #041b2f;            /* dark bands (Company Overview / By the Numbers) */
  --te-ds-navy-2: #061424;
  --te-ds-eyebrow: #f59a0a;           /* orange eyebrow labels */
  --te-ds-hl-from: #067f80;           /* teal highlight gradient in headings */
  --te-ds-hl-to: #1a9fb3;
  --te-ds-hl-on-dark: #34e0d0;        /* cyan highlight on dark bands */
  --te-ds-bar-teal: #12a1a1;          /* two-tone heading bar */
  --te-ds-bar-orange: #fca52d;
  --te-ds-teal: #0f8a87;              /* icons, labels */
  --te-ds-teal-soft: #e3f4f3;         /* icon badge fill */
  --te-ds-orange-soft: #fff3e0;
  --te-ds-dot: #ff9f1a;               /* small orange status dot on icon badges */
  --te-ds-deco: rgba(18, 161, 161, 0.45); /* arcs and dot grids */

  --te-card-bg: #ffffff;
  --te-card-border: #e7eff3;
  --te-card-radius: 1.125rem;
  --te-card-shadow: 0 1px 2px rgba(15, 40, 60, 0.04), 0 14px 34px -22px rgba(15, 50, 80, 0.32);
  --te-card-shadow-hover: 0 2px 4px rgba(15, 40, 60, 0.05), 0 22px 44px -22px rgba(15, 50, 80, 0.42);

  /* Navy (neutral/dark) scale */
  --te-navy-950: #060b18;
  --te-navy-900: #0b1220;
  --te-navy-800: #101a30;
  --te-navy-700: #16213d;
  --te-navy-600: #1c2c4d;
  --te-navy-500: #2a3d66;
  --te-navy-200: #c7d0e0; /* derived: border-navy-200 usage */
  --te-navy-100: #e4e8f0; /* derived: border-navy-100 usage */
  --te-navy-50: #f3f5f9; /* derived: bg-navy-50 usage */

  /* Ink — the near-black navy of the dark bands (stats, services) in the
     "Frame 118" reference. */
  --te-ink-950: #021026;
  --te-ink-900: #04162e;

  /* Brand (primary) scale — the bright blue of the "Frame 118" reference
     (header CTA, hero buttons, active nav, heading accents). Same variable
     names throughout the codebase, so this recolors every shared
     component consistently. */
  --te-brand-50: #eef5ff;
  --te-brand-100: #dbe8fe;
  --te-brand-200: #bdd5fd;
  --te-brand-300: #8fb8fa;
  --te-brand-400: #5994f3;
  --te-brand-500: #2f78ec;
  --te-brand-600: #1669e8;
  --te-brand-700: #0f55c4;
  --te-brand-800: #12469c;
  --te-brand-900: #143c7b;
  /* Lighter blue used for the highlighted word in section headings. */
  --te-brand-bright: #0a7cff;

  /* Teal — secondary CTAs ("Learn more about us", "View all industries",
     closing "Get in Touch"), "Learn more" links, How We Work accents. */
  --te-teal-50: #e6f7f5;
  --te-teal-100: #c9efea;
  --te-teal-300: #5fd3c4;
  --te-teal-400: #25dbc5;
  --te-teal-500: #03a494;
  --te-teal-600: #0f7977;
  --te-teal-700: #1a6e69;
  --te-teal-800: #016c64;

  /* Accent (gold/orange) — stat numbers, eyebrows, icon badges. */
  --te-accent-400: #fbb438;
  --te-accent-500: #fe9f06;
  --te-accent-600: #f08a00;

  /* Warm off-white used for the Home page's light section backgrounds in
     the new visual reference, in place of plain white. */
  --te-cream-50: #faf7f1;
  --te-cream-100: #f4efe4;

  /* Shadows */
  --te-shadow-card: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px -8px rgba(11, 18, 32, 0.12);
  --te-shadow-card-hover: 0 4px 12px rgba(11, 18, 32, 0.08), 0 20px 40px -12px rgba(11, 18, 32, 0.18);
  --te-shadow-card-glow: 0 0 0 1px rgba(28, 125, 255, 0.16), 0 0 28px -4px rgba(23, 201, 174, 0.28),
    0 20px 40px -12px rgba(11, 18, 32, 0.18);

  /* Radii (Tailwind rounded-lg / rounded-xl / rounded-2xl / rounded-3xl) */
  --te-radius-lg: 0.5rem;
  --te-radius-xl: 0.75rem;
  --te-radius-2xl: 1.25rem;
  --te-radius-3xl: 1.75rem;

  /* Buttons render fully pill-shaped in the new visual reference. */
  --te-btn-radius: 9999px;

  /* One "reference pixel": the "Frame 118" reference is a 1920px-wide
     frame, so calc(N * var(--te-u)) equals N px at 1920 and scales down
     proportionally on narrower screens. Always wrapped in clamp()/max()
     with a readable floor. */
  --te-u: calc(100vw / 1920);
  --u: var(--te-u);

  /* Inner-page layout (About Us reference): wide content column with
     ~100px gutters at 1920, and one vertical rhythm for every section. */
  --te-container-wide: 120rem;
  --te-gutter: clamp(1.25rem, calc(102 * var(--te-u)), 6.375rem);
  --te-section-pad: clamp(3rem, calc(96 * var(--te-u)), 6rem);

  /* Spacing scale subset actually used by the layout primitives below */
  --te-container-max: 80rem; /* Tailwind max-w-7xl */
  --te-container-pad: 1.25rem; /* px-5 */

  /* Breakpoints, documented for reference (media queries below use the
     literal px values since CSS custom properties cannot be used inside
     @media conditions) */
  /* sm: 640px · md: 768px · lg: 1024px · xl: 1280px */
}