/* ==========================================================================
   AGeqnies - Design Tokens
   Single source of truth for colour, type, space, radii, shadow and motion.
   Brand core (from content pack): navy #1C3A5E · teal #17A2A6
                                   light #EAF3F5 · body text #333333
   ========================================================================== */

/* --------------------------------------------------------------------------
   Webfonts - Geist and Geist Mono
   Copyright (c) 2023 Vercel, in collaboration with basement.studio. Licensed
   under the SIL Open Font License v1.1 - full text in
   public/fonts/OFL-Geist.txt, which must stay alongside the font files if this
   site is redistributed.

   Self-hosted deliberately: the site loads nothing from a third-party host, so
   there is no CDN dependency, no external request on first paint, and it still
   works offline and over file://.

   Why this pair. The reference for the type treatment is a neo-grotesque of the
   Suisse Int'l family, which is a commercial licence we do not hold. Geist is
   the closest freely licensed face in skeleton and proportion, and it ships a
   metrically related MONO used here for eyebrows and data labels. Pairing a
   sans with its own mono is what keeps that treatment coherent; pairing two
   unrelated families is what makes it look accidental.

   These are VARIABLE fonts. One file per subset covers the whole weight range,
   which is why there are three files rather than a dozen. The `font-weight`
   range tells the browser so, and any weight in between is available without
   another download.

   Subsets: latin and latin-ext for the sans; latin only for the mono, which
   only ever sets English labels and falls back to a system monospace outside
   that range.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   GRAPHIK

   The face Accenture sets its site in, and the reason the type below moves off
   the Suisse-derived treatment Geist was standing in for.

   LICENCE: Graphik is Commercial Type's. The EULA embedded in these files
   permits print and preview but names @font-face specifically as requiring a
   paid licence upgrade, and the OS/2 fsType bit is 4 (Preview & Print only).
   Serving it here needs Commercial Type's WEB licence for this domain. If that
   upgrade is not held, delete "Graphik" from --font-sans below and the site
   falls back to Geist with no other change. See ASSET-MANIFEST.md section 5a.

   TWO WEIGHTS ONLY - Regular and Medium. There is no Semibold or Bold in the
   project, so "the heavier weight for major headings" is Medium, which is
   where --fw-display already sat. Nothing in the scale had to move for it.

   The Medium face is declared across 500-600 rather than at 500 alone. The
   site asks for 600 in two places (strong/b, and 11px labels on dark), and
   with only 400 and 500 present a browser would synthesise a fake bold for
   those. Claiming the range tells it not to: real Medium, no smearing.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Graphik";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../public/fonts/Graphik-Regular.woff") format("woff");
}

@font-face {
  font-family: "Graphik";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../../public/fonts/Graphik-Medium.woff") format("woff");
}

/* latin */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../../public/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../../public/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin - mono, for eyebrows, labels and tabular data */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../../public/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand core ---------- */
  --navy: #1c3a5e;
  --teal: #17a2a6;
  --light: #eaf3f5;
  --ink: #333333;

  /* ---------- Navy scale (supporting shades only) ---------- */
  --navy-950: #060f19; /* near-black navy - deepest sections */
  --navy-900: #0a1826;
  --navy-800: #0f2337;
  --navy-700: #142e48;
  --navy-600: var(--navy); /* #1c3a5e */
  --navy-500: #2a5183;
  --navy-400: #3d6a9f;
  --navy-300: #6b91bb;
  --navy-200: #a8c2d9;

  /* ---------- Teal scale ---------- */
  --teal-700: #0d7175;
  --teal-600: #128a8d;
  --teal-500: var(--teal); /* #17a2a6 */
  --teal-400: #35b8bb;
  --teal-300: #5fcdcf;
  --teal-200: #9ce0e1;
  --teal-100: #d3f1f2;

  /* ---------- Neutrals ---------- */
  --white: #ffffff;
  --n-50: #f7fafb;
  --n-100: var(--light); /* #eaf3f5 */
  --n-200: #dbe7ea;
  --n-300: #c2d3d8;
  --n-400: #9aabb2;
  --n-500: #6d7c83;
  --n-600: #4f5c62;
  --n-700: var(--ink); /* #333333 */
  --n-800: #232a2e;

  /* ---------- Semantic: light surfaces ---------- */
  --bg: var(--white);
  --bg-soft: var(--n-50);
  --bg-tint: var(--n-100);
  /* Cool pale slate, used to lift a light section off white without going
     teal. Currently unused: .section--mist is not applied anywhere, since the
     homepage record band that used it moved to the dark register. */
  --bg-mist: #f5f6fa;
  --surface: var(--white);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--ink);
  --text-strong: var(--navy);
  --text-muted: var(--n-500);
  --heading: var(--navy);

  /* ---------- Semantic: dark surfaces ---------- */
  --d-bg: var(--navy-900);
  --d-bg-deep: var(--navy-950);
  --d-surface: rgba(255, 255, 255, 0.04);
  --d-surface-2: rgba(255, 255, 255, 0.07);
  --d-border: rgba(255, 255, 255, 0.11);
  --d-border-strong: rgba(255, 255, 255, 0.2);
  --d-text: #fff;
  --d-text-strong: #f2f8fa;
  --d-text-muted: rgba(233, 242, 246, 0.55);

  /* ---------- Semantic: editorial black (homepage) ----------
     The homepage runs on a near-black ground rather than the navy the inner
     pages use. Navy is still the brand colour and still carries the logo, the
     buttons and every inner-page hero; this is a second dark register for the
     one page that has to establish the company rather than explain a service.

     Not pure #000. A true black flattens photography and makes white type
     vibrate against it; #08090a keeps a trace of cool so the rack photography
     and the teal both sit on it naturally, and reads as black on any screen.

     --ed-bg-2 is the alternating band. It is four points lighter, which is
     enough to separate two adjacent sections under a hairline and not enough
     to read as a grey box on the page. */
  --ed-bg: #08090a;
  --ed-bg-2: #0e1012;
  --ed-charcoal: #1e2222;
  --ed-line: rgba(255, 255, 255, 0.14);
  --ed-line-soft: rgba(255, 255, 255, 0.08);
  --ed-text: #fff;
  --ed-text-mute: rgba(255, 255, 255, 0.52);
  /* The one teal that carries every accent on black. teal-500 is too dark
     against #08090a for small type (4.4:1); teal-400 clears 8.3:1, so labels,
     links and rules can all take the same value instead of drifting between
     three shades of the brand colour. */
  --ed-accent: var(--teal-400);

  /* ---------- Status (SLA / severity chips, form validation) ---------- */
  --sev-critical: #e05252;
  --sev-critical-soft: rgba(224, 82, 82, 0.14);
  --sev-high: #e08a3c;
  --sev-high-soft: rgba(224, 138, 60, 0.14);
  --sev-normal: var(--teal-500);
  --sev-normal-soft: rgba(23, 162, 166, 0.14);
  --ok: #2f9e6d;
  --ok-soft: rgba(47, 158, 109, 0.14);
  --danger: #c8453f;

  /* ---------- Typography ----------
     Geist for everything readable, Geist Mono for eyebrows, labels and data.
     Both fall back to the Helvetica/Arial stack from the brand spec, so the
     page is still correct if the webfont fails to load.

     The whole treatment below is one idea: set display type at MEDIUM weight,
     leading of roughly 1, and negative tracking, so a headline reads as a
     single dense block rather than a row of separate words. That is where the
     character comes from, far more than the choice of face. */
  /* Graphik first, Geist immediately behind it. Deleting the one word "Graphik"
     reverts the whole site - nothing else in the system names it. Geist is a
     deliberate second rather than a token fallback: it is the closest thing
     here in skeleton and proportion, so a failed load degrades quietly. */
  --font-sans: "Graphik", "Geist", "Helvetica Neue", Helvetica, Arial, "Segoe UI",
    system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono",
    Consolas, "Liberation Mono", Menlo, monospace;

  /* Fluid display scale - decisive headings, compact leading.

     Revised down roughly 20% at the display end and 6-8% through the text
     sizes. The previous scale topped out at 96px, which read as a product
     launch page rather than an infrastructure company: at that size the
     headline carries the section on its own and everything under it has to
     shout to stay in the hierarchy. Pulling the ceiling to 76px lets the
     hierarchy come from the intervals between sizes rather than from sheer
     mass, which is the editorial register the brief asks for.

     The intervals are preserved, not just the endpoints - each step is still
     about 1.3x the one below it, so nothing collapses into its neighbour.
     Comments show desktop max in px. */
  --fs-display-1: clamp(2.25rem, 1.15rem + 4.4vw, 4.75rem); /* 96 -> 76 */
  --fs-display-2: clamp(2rem, 1.33rem + 2.7vw, 3.5rem); /* 72 -> 56 */
  --fs-display-3: clamp(1.6875rem, 1.27rem + 1.69vw, 2.625rem); /* 50 -> 42 */
  --fs-h3: clamp(1.25rem, 1.08rem + 0.67vw, 1.625rem); /* 30 -> 26 */
  --fs-h4: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem); /* 21 -> 19 */
  --fs-lead: clamp(1rem, 0.945rem + 0.22vw, 1.125rem); /* 20 -> 18 */
  /* 15px. Body sets the `ch` that --measure resolves against, so dropping it
     also tightens every controlled measure on the site by the same ratio -
     the paragraphs get shorter as well as smaller, which is most of what
     makes the page feel less dominant. */
  --fs-body: 0.9375rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  /* Held at 11px. Everything above moved down; this cannot follow without
     the eyebrows and fine print dropping under the size where a proportional
     face at this tracking stays readable. */
  --fs-micro: 0.6875rem;

  /* Display leading. Was a flat 1, which suited the dense Suisse-derived
     treatment Geist was standing in for: lines almost touching, ascenders and
     descenders interlocking. Graphik is a quieter, more corporate face and the
     brief for it is Accenture's - large and confident, but comfortable rather
     than compressed. 1.05 opens the lines just enough to stop three stacked
     display lines reading as a solid block, without drifting into the airy
     leading that would make the hero look like body copy. */
  --lh-tight: 1.05;
  --lh-snug: 1.06;
  --lh-heading: 1.14;
  /* Body deliberately does NOT follow the reference, which sets paragraphs at
     1.1. That works for two-line marketing lines; these pages carry real
     explanatory copy, and at 1.1 a five-line paragraph becomes a wall. */
  --lh-body: 1.5;
  --lh-relaxed: 1.6;

  /* Negative tracking, restrained. It only applies at size: below roughly 28px
     it starts to hurt legibility, which is why --ls-normal stays at 0 for body
     copy.

     Was -0.03em, chasing a reference that set -0.035em. Graphik does not want
     that much: it is drawn with even, generous sidebearings, and pulling it
     that tight closes counters and starts to look like a condensed cut rather
     than a deliberate setting. -0.02em keeps headlines reading as one block
     while leaving the letterforms alone - which is roughly where Accenture
     sets it. */
  --ls-display: -0.02em;
  --ls-heading: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.01em;
  /* Small uppercase SANS labels. Unchanged: a proportional face at 11-13px
     genuinely needs this much air to read as a label rather than a word. */
  --ls-eyebrow: 0.13em;
  /* Small uppercase MONO labels. Much less, because mono already carries wide
     sidebearings - at 0.13em a monospaced label reads as spaced-out lettering.
     Used by .eyebrow; the other micro-labels stay sans on purpose, since a page
     where every small label is monospaced stops reading as a deliberate second
     voice and starts reading as a theme. */
  --ls-mono: 0.08em;
  /* Uppercase always needs breathing room between letters. */
  --ls-caps: 0.025em;

  /* Display and headings share one weight - medium. Nothing on the site is
     bold: 700 exists in the variable range but is deliberately unused, because
     a heavier grotesque is exactly what made the display type look generic. */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  /* Semantic aliases, so a weight decision is made once here */
  --fw-display: var(--fw-medium);
  --fw-heading: var(--fw-medium);

  /* Controlled measure */
  --measure: 68ch;
  --measure-tight: 52ch;
  --measure-wide: 80ch;

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --header-h: 72px;
  --header-h-compact: 64px;
  /* The header is a full-bleed frosted bar flush to the top edge (galaxy
     template), so there is no floating gap to clear. Kept as a token because
     several padding and scroll-offset rules still add it. */
  --header-float: 0px;

  /* ---------- Space scale ---------- */
  --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: 6rem;
  --sp-12: 8rem;

  /* Vertical rhythm between major sections */
  --section-y: clamp(4.5rem, 2.2rem + 7vw, 8.5rem);
  --section-y-lg: clamp(5.5rem, 2.4rem + 9vw, 11rem);
  --section-y-sm: clamp(3rem, 1.8rem + 4vw, 5rem);

  /* ---------- Radii - large but restrained ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows - subtle, only where needed ---------- */
  --sh-xs: 0 1px 2px rgba(6, 15, 25, 0.05);
  --sh-sm: 0 2px 8px rgba(6, 15, 25, 0.06);
  --sh-md: 0 8px 24px -6px rgba(6, 15, 25, 0.11), 0 2px 6px rgba(6, 15, 25, 0.05);
  --sh-lg: 0 24px 56px -20px rgba(6, 15, 25, 0.2),
    0 6px 16px -8px rgba(6, 15, 25, 0.08);
  --sh-teal: 0 14px 34px -12px rgba(23, 162, 166, 0.42);
  --sh-inset-dark: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---------- Focus ring ---------- */
  --ring: 0 0 0 3px rgba(23, 162, 166, 0.45);
  --ring-dark: 0 0 0 3px rgba(95, 205, 207, 0.6);
  --ring-offset: 2px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
  --dur-reveal: 720ms;

  /* ---------- Z-index ---------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-menu: 70;
  --z-overlay: 80;
}

/* Motion tokens collapse to zero when the visitor prefers reduced motion.
   Every animation in site.css derives its duration from these, so the whole
   experience becomes static without any layout or content loss. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
  }
}