/* ==========================================================================
   Infilabs — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, radius, elevation,
   motion and layout. Nothing below this file should contain a raw hex value
   or a magic pixel number.

   Theming model
   -------------
   · `:root` holds the dark theme (the site's default and primary identity).
   · `[data-theme="light"]` overrides only the surface/ink/line channels.
   · `--accent-h` is a *hue number*, not a colour. Any subtree can re-scope its
     accent by setting `style="--accent-h: 265"`, and every derived accent
     colour follows automatically. This is how 14 service practices, 21
     products and 18 industries each get their own palette from one system.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------------------------------------------------------------- brand */
  /* Sampled from the official logo asset (assets/images/infi.png): the letters
     are pure black and the terminating period is this teal. It is the only
     colour in the mark, so it is the authoritative brand colour. */
  --brand-teal: #4bcba7;
  --brand-teal-h: 163;

  --brand-h: 224;                    /* Infilabs blue */
  --brand-2-h: 268;                  /* violet */
  --brand-3-h: 189;                  /* cyan */

  --brand: hsl(var(--brand-h) 92% 60%);
  --brand-2: hsl(var(--brand-2-h) 86% 66%);
  --brand-3: hsl(var(--brand-3-h) 90% 56%);

  /* Per-subtree accent. Overridden inline on scoped sections. */
  --accent-h: var(--brand-h);
  --accent: hsl(var(--accent-h) 88% 64%);
  --accent-bright: hsl(var(--accent-h) 95% 72%);
  --accent-deep: hsl(var(--accent-h) 80% 46%);
  --accent-soft: hsl(var(--accent-h) 88% 64% / 0.14);
  --accent-softer: hsl(var(--accent-h) 88% 64% / 0.07);
  --accent-line: hsl(var(--accent-h) 88% 64% / 0.32);

  /* Signature gradients */
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 55%, var(--brand-3) 100%);

  /* Gradient for surfaces that carry white TEXT — buttons, badges, active chips.
     --grad-brand cannot be used for these: its cyan end resolves to
     rgb(19,169,195), giving white text only 2.80:1 (AA needs 4.5 at the 12px
     semibold used on buttons). Every stop below clears 4.5, and the teal end
     ties the ramp to the logo's brand colour. Decorative bars and text fills
     keep --grad-brand, where the bright cyan is an asset rather than a problem. */
  --grad-cta: linear-gradient(
    135deg,
    hsl(var(--brand-h) 92% 48%) 0%,
    hsl(var(--brand-2-h) 78% 52%) 55%,
    hsl(168 70% 30%) 100%
  );
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  --grad-text: linear-gradient(100deg, var(--brand-3) 0%, var(--brand) 42%, var(--brand-2) 100%);

  /* ------------------------------------------------------------- surfaces */
  --ink: #04070f;                    /* page background */
  --surface-1: #080d1c;              /* dark bands */
  --surface-2: #0c1327;              /* raised panels */
  --surface-3: #111a34;              /* inputs, chips */

  --text: #e9edf9;
  --text-2: #b3bdd6;
  --text-3: #8391b0;
  --text-inv: #05080f;

  --line: rgb(255 255 255 / 0.085);
  --line-2: rgb(255 255 255 / 0.14);

  /* Glassmorphism channels */
  --glass-bg: rgb(255 255 255 / 0.042);
  --glass-bg-hover: rgb(255 255 255 / 0.072);
  --glass-line: rgb(255 255 255 / 0.10);
  --glass-blur: 18px;

  /* Neumorphic dual-light shadow (used on buttons and stat tiles) */
  --neu: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.4);

  /* -------------------------------------------------------------- status */
  --ok: hsl(152 62% 48%);
  --warn: hsl(38 92% 58%);
  --err: hsl(354 78% 60%);

  /* ------------------------------------------------------------ typography */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

  /* Fluid scale — clamp(min, preferred, max), 320px → 1440px viewport */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  --fs-xl: clamp(1.4375rem, 1.25rem + 0.9vw, 1.9375rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --fs-3xl: clamp(2.125rem, 1.6rem + 2.6vw, 3.625rem);
  --fs-4xl: clamp(2.5rem, 1.7rem + 4vw, 5rem);
  /* Capped at 4.25rem: the home hero is a two-column layout, and anything
     larger forces "Engineering the" onto two lines, which reads as an accident
     rather than a deliberate line break. */
  --fs-hero: clamp(2.375rem, 1.5rem + 3.4vw, 4.25rem);

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.68;

  --tr-tight: -0.035em;
  --tr-snug: -0.02em;
  --tr-wide: 0.14em;

  /* ------------------------------------------------------------------ space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Vertical rhythm for full-bleed bands */
  --band: clamp(4rem, 7vw, 8.5rem);
  --band-tight: clamp(2.75rem, 4.5vw, 5rem);

  /* ------------------------------------------------------------------ radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* -------------------------------------------------------------- elevation */
  --sh-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.18);
  --sh-md: 0 4px 12px rgb(0 0 0 / 0.28), 0 12px 32px rgb(0 0 0 / 0.22);
  --sh-lg: 0 8px 24px rgb(0 0 0 / 0.32), 0 28px 64px rgb(0 0 0 / 0.3);
  --sh-accent: 0 8px 30px hsl(var(--accent-h) 88% 40% / 0.32);
  --sh-brand: 0 10px 34px hsl(var(--brand-h) 90% 42% / 0.34);

  /* ----------------------------------------------------------------- layout */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: clamp(1.125rem, 4vw, 2.75rem);
  --header-h: 74px;

  /* ----------------------------------------------------------------- motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 760ms;

  /* ---------------------------------------------------------------- z-index */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-mega: 70;
  --z-drawer: 90;
  --z-preloader: 100;
}

/* ==========================================================================
   Light theme — surfaces, ink and lines only. Brand hues are shared so the
   identity stays consistent across both themes.
   ========================================================================== */

[data-theme='light'] {
  color-scheme: light;

  --ink: #ffffff;
  --surface-1: #f4f7fd;
  --surface-2: #ffffff;
  --surface-3: #eef2fa;

  --text: #070d1c;
  --text-2: #40506e;
  --text-3: #64718c;
  --text-inv: #ffffff;

  --line: rgb(9 16 34 / 0.10);
  --line-2: rgb(9 16 34 / 0.16);

  --glass-bg: rgb(255 255 255 / 0.72);
  --glass-bg-hover: rgb(255 255 255 / 0.92);
  --glass-line: rgb(9 16 34 / 0.09);

  --neu: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(9 16 34 / 0.06);

  /* Accents need slightly more depth to hold contrast on white */
  --accent: hsl(var(--accent-h) 78% 48%);
  --accent-bright: hsl(var(--accent-h) 82% 56%);
  --accent-deep: hsl(var(--accent-h) 76% 38%);
  --accent-soft: hsl(var(--accent-h) 78% 48% / 0.10);
  --accent-softer: hsl(var(--accent-h) 78% 48% / 0.05);
  --accent-line: hsl(var(--accent-h) 78% 48% / 0.26);

  --brand: hsl(var(--brand-h) 84% 50%);
  --brand-2: hsl(var(--brand-2-h) 74% 56%);
  --brand-3: hsl(var(--brand-3-h) 82% 42%);

  --sh-sm: 0 1px 2px rgb(9 16 34 / 0.06), 0 2px 8px rgb(9 16 34 / 0.05);
  --sh-md: 0 4px 12px rgb(9 16 34 / 0.07), 0 12px 30px rgb(9 16 34 / 0.07);
  --sh-lg: 0 10px 26px rgb(9 16 34 / 0.09), 0 30px 60px rgb(9 16 34 / 0.10);
}

/* Dark bands inside the light theme keep the dual-tone "mixed sections" look
   the design calls for: light page, dark feature bands. */
[data-theme='light'] .section--dark {
  --ink: #060b18;
  --surface-1: #060b18;
  --surface-2: #0c1327;
  --surface-3: #111a34;
  --text: #e9edf9;
  --text-2: #b3bdd6;
  --text-3: #8391b0;
  --line: rgb(255 255 255 / 0.085);
  --line-2: rgb(255 255 255 / 0.14);
  --glass-bg: rgb(255 255 255 / 0.045);
  --glass-bg-hover: rgb(255 255 255 / 0.075);
  --glass-line: rgb(255 255 255 / 0.10);
  --accent: hsl(var(--accent-h) 88% 64%);
  --accent-bright: hsl(var(--accent-h) 95% 72%);
  /* --accent-deep must be re-scoped too. Light theme uses it for accent *text*
     (.eyebrow, .card__tagline, .office__role, .link-arrow …); left at its light
     value it is a dark tone, which fails contrast on a dark band. */
  --accent-deep: hsl(var(--accent-h) 95% 72%);
  --accent-soft: hsl(var(--accent-h) 88% 64% / 0.14);
  --accent-line: hsl(var(--accent-h) 88% 64% / 0.32);
  --brand: hsl(var(--brand-h) 92% 60%);
  --brand-2: hsl(var(--brand-2-h) 86% 66%);
  --brand-3: hsl(var(--brand-3-h) 90% 56%);
  color-scheme: dark;
}