/**
 * Design tokens.
 *
 * Values were measured from the reference site's rendered DOM rather than
 * eyeballed, so type scale, colour and spacing match it exactly.
 */

:root {
	/* ---- brand ----------------------------------------------------
	 *
	 * Sampled from the 2026 circular SpectraTech mark: a ring and a wordmark
	 * that run bright blue (#0093FF) through indigo (#1E0A83) into magenta
	 * (#F2025D), with "BPO Solutions Pvt Ltd" set in a near-black navy
	 * (#0A0057). Navy carries the site, pink is the accent, blue marks state.
	 *
	 * Every pairing below is contrast-checked and the ratio is written next to
	 * it. Raw logo colours (--a8-azure, --a8-pink) are for gradients and glows
	 * only; the -light / -ink pairs are what text and icons are allowed to use.
	 */
	--a8-brand: #0A0057;
	--a8-brand-deep: #06003A;
	/* The service pages sit on a darker ground than the rest of the site. */
	--a8-brand-darkest: #04002A;
	/* The logo blue, legible on the brand navy: 5.8:1. */
	--a8-brand-light: #0093FF;
	/* Blue for light grounds: 6.9:1 on white, where the logo blue is 3.2:1. */
	--a8-brand-ink: #0A57B4;
	/* Button fill: white on it is 5.3:1. The raw logo pink only manages 4.3:1. */
	--a8-accent: #D6004F;
	--a8-accent-deep: #A8003E;
	--a8-tint: #E4ECFF;
	--a8-tint-pink: #FFE6EF;

	/* Raw logo colours — decoration only. */
	--a8-azure: #0093FF;
	--a8-pink: #F2025D;
	--a8-violet: #7B2CBF;
	/* 8.6:1 on the brand navy. */
	--a8-pink-light: #FF8FBF;
	/* 6.2:1 on white, where the lighter pink fails. */
	--a8-pink-ink: #C2004A;

	/* The ring's own run of colour. Used as an edge, an underline or a wash —
	 * never behind text, because a gradient cannot hold one contrast ratio. */
	--a8-spectrum: linear-gradient( 90deg, #0093FF 0%, #0A57B4 24%, #1E0A83 50%, #7B2CBF 68%, #F2025D 100% );
	--a8-spectrum-soft: linear-gradient( 135deg, rgba( 0, 147, 255, .20 ) 0%, rgba( 30, 10, 131, .14 ) 52%, rgba( 242, 2, 93, .20 ) 100% );
	/* Long enough to slide under a border without the seam showing. */
	--a8-spectrum-loop: linear-gradient( 90deg, #0093FF, #7B2CBF, #F2025D, #7B2CBF, #0093FF );
	/* The same run turned on its side, for edges that are tall and thin. A
	   90deg gradient squeezed into a 3px column reads as one muddy colour. */
	--a8-spectrum-v: linear-gradient( 180deg, #0093FF 0%, #7B2CBF 55%, #F2025D 100% );

	/* The hero video is a light studio plate averaging #C3C2CE at its edges;
	 * the hero ground is tuned to it so the panel does not sit on the page as a
	 * rectangle of a different grey. */
	--a8-hero-bg: #EDEEF5;

	/* ---- neutrals ------------------------------------------------- */
	--a8-white: #FFFFFF;
	--a8-off-white: #F7F7FA;
	--a8-border: #E2E2E2;
	--a8-black: #000000;
	--a8-text: rgba( 0, 0, 0, .7 );
	--a8-text-muted: rgba( 0, 0, 0, .55 );
	--a8-text-invert: #FFFFFF;
	--a8-text-invert-muted: rgba( 255, 255, 255, .75 );

	/* ---- typography ----------------------------------------------- */
	--a8-font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--a8-h1: 66px;
	--a8-h1-lh: 1.1;
	--a8-h2: 48px;
	--a8-h2-lh: 1.1;
	--a8-h3: 32px;
	--a8-h3-lh: 1.2;
	--a8-h4: 24px;
	--a8-h5: 20px;
	--a8-h6: 16px;

	--a8-body: 16px;
	--a8-body-lh: 1.5;
	--a8-small: 14px;
	--a8-eyebrow: 16px;
	--a8-eyebrow-lh: 1.4;

	--a8-weight-light: 300;
	--a8-weight-normal: 400;
	--a8-weight-medium: 500;
	--a8-weight-bold: 700;

	/* ---- layout --------------------------------------------------- */
	--a8-container: 1280px;
	--a8-gutter: 30px;
	--a8-section-y: 90px;
	--a8-section-y-sm: 56px;

	/* ---- spacing scale -------------------------------------------- */
	--a8-space-1: 4px;
	--a8-space-2: 8px;
	--a8-space-3: 12px;
	--a8-space-4: 16px;
	--a8-space-5: 24px;
	--a8-space-6: 32px;
	--a8-space-7: 48px;
	--a8-space-8: 64px;

	/* ---- components ----------------------------------------------- */
	/*
	 * Four radii and nothing else. `panel` is the big contained slab — the
	 * trust band, the enquiry frame, the Other services panel, the footer —
	 * and was eight separate hard-coded 40px values before this.
	 */
	--a8-radius-sm: 10px;
	--a8-radius: 18px;
	--a8-radius-lg: 28px;
	--a8-radius-panel: 40px;
	--a8-radius-pill: 999px;

	/* ---- the card -------------------------------------------------
	 *
	 * The card repeats in every grid on the site, so its hairline, ground,
	 * padding and resting elevation are tokens rather than four values retyped
	 * per section. Changing a card means changing these.
	 */
	/*
	 * A light band of the brand blue rather than a neutral grey, so the edge
	 * belongs to the palette. It is what separates a white card from a white
	 * section, which is why it is drawn thick enough to be seen — at 1px a
	 * tint this light is not an edge, it is a rounding error.
	 */
	--a8-border-card: #C9D8F5;
	--a8-card-border-w: 3px;
	/*
	 * Equal on all four sides, and stepped down with the viewport: 32px on a
	 * desktop, 28px on a tablet, 24px on a phone. It was 28px everywhere, which
	 * left the drawn hover edge and the last line of copy closer than they
	 * should be on the wider cards.
	 */
	--a8-card-pad: 32px;
	/*
	 * A card is white and most sections are white or near-white, so the 1px
	 * hairline was carrying the whole separation at about 1.2:1 — the cards
	 * dissolved into the section. A resting shadow is what makes a card read
	 * as an object sitting on the page rather than a region of it. Lighter
	 * than --a8-shadow-sm, because it is on at rest and every card has it.
	 */
	--a8-card-rest: 0 1px 2px rgba( 10, 0, 87, .05 ), 0 10px 30px -12px rgba( 10, 0, 87, .16 );
	/* The decorative hover edge. */
	--a8-card-edge: 3px;

	--a8-btn-size: 12px;
	/*
	 * Positive, not negative. Inter Tight is already a condensed cut, and at
	 * 12px bold capitals the old -.2px closed the word spaces up so far that
	 * "TALK TO US" read as one word. Capitals want a little air; this is the
	 * tracking every uppercase UI label on the site now shares.
	 */
	--a8-btn-tracking: .03em;
	/* The reference button is 12px/28px with no border and a 1.7 line-height;
	   ours keeps a 2px border for the outline style, so the padding is inset
	   by that much to land on the same 44.4px box. */
	--a8-btn-pad: 10px 26px;
	--a8-btn-lh: 1.7;

	/*
	 * One elevation scale, all tinted with the current brand navy. Three
	 * generations of it were in here at once: the reference purple
	 * (57,25,75), its mega-menu grey-violet (88,82,125) and the phase-11 navy
	 * (20,0,92), alongside the real one.
	 */
	--a8-shadow-sm: 0 1px 2px rgba( 10, 0, 87, .06 ), 0 6px 16px -12px rgba( 10, 0, 87, .30 );
	--a8-shadow: 0 2px 6px rgba( 10, 0, 87, .07 ), 0 18px 40px -24px rgba( 10, 0, 87, .35 );
	--a8-lift: 0 18px 38px -22px rgba( 10, 0, 87, .48 );
	--a8-lift-strong: 0 24px 52px -24px rgba( 10, 0, 87, .55 );
	/* The focus ring, in the logo blue rather than the retired lilac. */
	--a8-ring: 0 0 0 3px rgba( 0, 147, 255, .30 );

	/*
	 * Motion. `--a8-transition` is the small-state default; the card language
	 * uses the two below it so an edge and an image never drift apart.
	 */
	--a8-transition: 220ms cubic-bezier( .4, 0, .2, 1 );
	--a8-ease-card: cubic-bezier( .3, .7, .2, 1 );
	--a8-t-edge: 420ms;
	--a8-t-image: 600ms;

	/* ---- header --------------------------------------------------- */
	/* Measured from the reference header. */
	/* Raised from 67px for the 2026 circular mark: a round badge at 46px hides
	   the “BPO Solutions Pvt Ltd” line inside it. */
	--a8-header-h: 86px;
	--a8-header-h-sm: 66px;
}

/* Tablet */
@media ( max-width: 1024px ) {
	:root {
		--a8-card-pad: 28px;
		--a8-h1: 48px;
		--a8-h2: 38px;
		--a8-h3: 28px;
		--a8-section-y: 68px;
	}
}

/* Mobile */
@media ( max-width: 767px ) {
	:root {
		--a8-h1: 34px;
		--a8-h2: 28px;
		--a8-h3: 22px;
		--a8-h4: 20px;
		--a8-gutter: 20px;
		--a8-section-y: 48px;
		--a8-section-y-sm: 36px;
		/* A phone card is the full column width, so it can give up some inset
		   before the measure gets uncomfortable. */
		--a8-card-pad: 24px;
	}
}