/*
 * Design tokens — colors, type scale, spacing, shared primitives.
 * Source of truth: Figma "Thinkpalm_Homepage" → page "Final ✅" → frame
 * "21-07-2026- Content_updated" (node 1752:3936, 1440x9915).
 *
 * Typography is Plus Jakarta Sans (126 of 142 text nodes in the frame use
 * it; the handful of Roboto / Open Sans / Inter nodes are third-party
 * widget chrome — Material form fields, the captcha, the cookie bar — and
 * are not part of the design system). Self-hosted, no Google Fonts CDN.
 */

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-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;
}

@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans/plus-jakarta-sans-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;
}

:root {
	/* Colors — sampled from the Figma frame */
	--tp-black: #131313;
	--tp-heading: #021b42;        /* section H2 on light backgrounds */
	--tp-navy-900: #0a1c4d;
	--tp-navy-800: #0d2266;
	--tp-blue: #1977f3;
	--tp-blue-dark: #153a8f;
	--tp-blue-glow: #1853da;
	--tp-blue-gradient: linear-gradient(135deg, #153a8f 0%, #1977f3 100%);
	--tp-white: #ffffff;
	--tp-off-white: #f5f7fb;
	--tp-soft-blue: #f4f7ff;      /* testimonial band wash */
	--tp-ice-blue: #eaf9ff;       /* stats card tint */
	--tp-gray-100: #f0f2f6;
	--tp-gray-300: #d7dce5;
	--tp-gray-400: #8c9090;       /* footer / contact meta */
	--tp-gray-500: #6d6d6d;       /* small labels */
	--tp-gray-600: #656565;       /* secondary body */
	--tp-gray-700: #595959;       /* body copy */
	--tp-gray-800: #3b3b3b;       /* stat numerals */
	--tp-footer-text: #d9d9d9;
	--tp-teal-dark: #00354a;      /* card eyebrow badges */
	--tp-teal: #004a67;
	--tp-orange: #e37900;
	--tp-border: #e5e8ef;
	--tp-divider: #dde4ee;        /* 1px rules between sections */
	--tp-yellow: #ffb400;

	/* Typography — Figma type scale (weight size/line-height) */
	--tp-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--tp-h1: 500 72px/82px var(--tp-font-heading);      /* hero */
	--tp-h2: 600 40px/1 var(--tp-font-heading);         /* section titles */
	--tp-h3: 600 28px/34px var(--tp-font-heading);
	--tp-h4: 600 24px/34px var(--tp-font-heading);
	--tp-h5: 600 20px/34px var(--tp-font-heading);
	--tp-subhead: 500 24px/34px var(--tp-font-heading);
	--tp-stat: 600 32px/34px var(--tp-font-heading);
	--tp-body-lg: 400 20px/34px var(--tp-font-body);
	--tp-body: 400 16px/24px var(--tp-font-body);
	--tp-body-sm: 400 14px/20px var(--tp-font-body);
	--tp-body-xs: 400 12px/24px var(--tp-font-body);
	--tp-label: 500 14px/20px var(--tp-font-body);
	--tp-btn: 700 16px/24px var(--tp-font-body);

	/* Layout — Figma content columns are x=100 w=1240 (wide) and x=164 w=1112
	   (narrow) on a 1440 page. The container adds a 20px mobile gutter, so the
	   max-widths carry that gutter to keep the *inner* column on the Figma
	   measurements: 1280-40=1240 and 1152-40=1112. */
	--tp-container: 1280px;
	--tp-container-narrow: 1152px;
	--tp-gutter: 20px;
	--tp-radius-lg: 24px;
	--tp-radius-md: 16px;
	--tp-radius-sm: 8px;
	--tp-radius-pill: 999px;

	/* Motion — taken from the Figma prototype on frame 1752:3936, which
	   defines 47 interactions using exactly three easings:
	     OUT_CUBIC            300ms   ×26  — the default UI transition
	     SPRING_PRESET_THREE  [1,80,20,0]  ×15 — mass 1, stiffness 80, damping 20
	     GENTLE_SPRING        [1,100,15,0] ×5  — mass 1, stiffness 100, damping 15
	   Figma reports a spring's *full envelope* (1250ms / 1022ms), but what the
	   eye reads is the settling time: 4/(ζ·ωn). SPRING_PRESET_THREE is
	   overdamped (ζ≈1.12) so it settles ≈0.4s with no overshoot;
	   GENTLE_SPRING is underdamped (ζ≈0.75) so it settles ≈0.55s with a small
	   overshoot, hence the >1 control point on --tp-ease-gentle. */
	--tp-ease: cubic-bezier(0, 0, 0.58, 1);              /* Figma OUT_CUBIC */

	/* SPRING_PRESET_THREE = mass 1, stiffness 80, damping 20.
	   ζ = 20/(2·√80) = 1.118 → OVERDAMPED, so it never overshoots.
	   Its poles are -5.528 and -14.472; the DOMINANT one is -5.528, giving
	   τ = 0.181s and a 2% settle of ~0.72s. (The familiar 4/(ζ·ωn) shortcut is
	   only valid for an underdamped spring — here it yields 0.4s and runs the
	   motion nearly twice too fast.) The step response is 50% done at 0.2s and
	   82% at 0.4s: far flatter through the middle than any cubic-bezier can
	   express, so it is sampled as linear() below. */
	--tp-ease-spring: linear(
		0 0%, 0.0305 4.2%, 0.1011 8.3%, 0.1899 12.5%, 0.2839 16.7%, 0.3757 20.8%,
		0.4614 25%, 0.5391 29.2%, 0.6082 33.3%, 0.6689 37.5%, 0.7217 41.7%,
		0.7673 45.8%, 0.8066 50%, 0.8402 54.2%, 0.8689 58.3%, 0.8934 62.5%,
		0.9143 66.7%, 0.932 70.8%, 0.9471 75%, 0.9599 79.2%, 0.9707 83.3%,
		0.98 87.5%, 0.9878 91.7%, 0.9944 95.8%, 1 100%
	);

	/* GENTLE_SPRING = mass 1, stiffness 100, damping 15.
	   ζ = 0.75 → UNDERDAMPED, so 4/(ζ·ωn) does apply: settles at ~0.53s, and it
	   genuinely overshoots (peaks at ~100.5% around 83% of the way through). */
	--tp-ease-gentle: linear(
		0 0%, 0.0229 4.2%, 0.0813 8.3%, 0.1624 12.5%, 0.256 16.7%, 0.3543 20.8%,
		0.4516 25%, 0.5438 29.2%, 0.6284 33.3%, 0.7039 37.5%, 0.7695 41.7%,
		0.8252 45.8%, 0.8715 50%, 0.909 54.2%, 0.9386 58.3%, 0.9613 62.5%,
		0.9782 66.7%, 0.9901 70.8%, 0.998 75%, 1.0027 79.2%, 1.0049 83.3%,
		1.0053 87.5%, 1.0043 91.7%, 1.0024 95.8%, 1 100%
	);

	--tp-speed-fast: 0.3s;    /* OUT_CUBIC 300ms */
	--tp-speed: 0.4s;         /* generic UI easing, not a Figma spring */
	--tp-speed-spring: 0.72s; /* SPRING_PRESET_THREE settle — pair with --tp-ease-spring */
	--tp-speed-slow: 0.53s;   /* GENTLE_SPRING settle — pair with --tp-ease-gentle */

	/* Auto-playing loops (AFTER_TIMEOUT interactions).
	   Awards marquee 2001:1857 — the 2849px track travels 1410px in 10s LINEAR
	   (≈141px/s); the CSS marquee derives its duration from that rate.
	   Client-logo strip 1655:16955 — 1100ms dwell, 400ms OUT_CUBIC cross-fade.
	   Life@ThinkPalm 2076:6124 — 4000ms OUT_CUBIC glow drift, ping-ponging. */
	--tp-marquee-rate: 141;      /* px per second, unitless for calc() */
	--tp-logo-dwell: 1100ms;
	--tp-logo-fade: 400ms;
	--tp-life-drift: 4000ms;
}
