/**
 * Paysetra — Design Tokens
 * Premium Fintech UI System
 * All colors, type, spacing, radius, shadow and motion values used across
 * assets/css/style.css are defined here. Do not hard-code raw values elsewhere.
 *
 * Brand palette matches the client's approved Paysetra brand guidelines
 * (paysetra.com): solid colors only — no gradients anywhere in the theme.
 * Electric Blue and Mauve are secondary/supporting colors used sparingly as
 * accents, not as a repeating "alt" pattern.
 */

:root {

	/* =========================================================
	   1. BRAND COLORS
	========================================================= */
	--color-primary: #F47C20;
	--color-primary-rgb: 244, 124, 32;
	--color-primary-dark: #D9660A;

	--color-secondary: #54595F;
	--color-secondary-rgb: 84, 89, 95;

	--color-text: #444444;
	--color-text-rgb: 68, 68, 68;

	--color-black: #2F2B33;
	--color-black-rgb: 47, 43, 51;

	--color-white: #FFFFFF;

	--color-light-bg: #f5f5f5;
	--color-light-bg-rgb: 225, 227, 230;

	/* Secondary / supporting brand swatches — used sparingly as accents,
	   never as a systematic "alt" color for every other component. */
	--gradient-start: #B8A9C9;
	--gradient-end: #208AF4;
	--gradient-end-rgb: 32, 138, 244;

	/* Derived dark-surface tones for footer / dark sections */
	--color-dark-900: #292e31;
	--color-dark-900-rgb: 26, 23, 32;
	--color-dark-800: #221E2C;
	--color-dark-700: #2C2735;
	--color-dark-600: #383140;
	--color-dark-border: rgba(255, 255, 255, .08);
	--color-dark-text-muted: rgba(255, 255, 255, .66);
	--color-dark-text-faint: rgba(255, 255, 255, .45);

	/* Semantic aliases */
	--color-success: #1FAA6D;
	--color-danger: #E8503A;
	--color-border: #C7C9CC;
	--color-border-medium: #9B9B9B;
	--color-heading: var(--color-black);
	--color-body: var(--color-text);
	--color-surface: var(--color-white);
	--color-surface-alt: var(--color-light-bg);

	/* =========================================================
	   2. "GRADIENT" TOKENS
	   Kept as named tokens so component CSS doesn't need touching, but
	   every one now resolves to a solid color per brand guidelines —
	   no linear/radial gradients anywhere in the theme.
	========================================================= */
	--gradient-primary: var(--color-primary);
	--gradient-brand: var(--color-black);
	--gradient-text: var(--color-primary);
	--gradient-cta: var(--color-primary);
	--gradient-hero-light: var(--color-light-bg);
	--gradient-compliance-light: var(--color-light-bg);
	/* The one deliberate exception to "no gradients": the final-CTA banner
	   card only, using lightened tints of the brand's Mauve/Electric Blue
	   secondary colors — a selective accent, not a repeating pattern. */
	--gradient-cta-banner: linear-gradient(120deg, #C6BAD4 0%, #4DA1F6 100%);

	/* =========================================================
	   3. TYPOGRAPHY
	========================================================= */
	--font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

	/* The parent (Twenty-Twenty-One) theme styles headings, the primary
	   nav menu, buttons, footer, etc. off its OWN --global--font-primary /
	   --global--font-secondary tokens, not --font-family-base — so
	   without this, those elements fall through to their default stack
	   (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ...), and on
	   Windows "Segoe UI" is installed and wins over Roboto. Aliasing both
	   parent tokens here routes every element that uses them back to our
	   single Roboto stack. */
	--global--font-primary: var(--font-family-base);
	--global--font-secondary: var(--font-family-base);

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-bold: 700;
	--fw-black: 900;

	--fs-display: clamp(2.75rem, 4.4vw + 1rem, 4.75rem);
	--fs-h1: clamp(2.25rem, 3.2vw + 1rem, 3.25rem);
	--fs-h2: clamp(1.875rem, 2.2vw + 1rem, 2.625rem);
	--fs-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem);
	--fs-h4: 1.25rem;
	/* Sized for word-based stat values ("Same-Day", "FCA Reg.") in a
	   4-up grid — fs-h1 is tuned for section headings and wraps these
	   awkwardly even on common desktop widths. */
	--fs-stat-value: clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
	--fs-h5: 1.125rem;
	--fs-lead: clamp(1.05rem, .6vw + .85rem, 1.25rem);
	--fs-body: 1rem;
	--fs-small: .875rem;
	--fs-xs: .75rem;
	--fs-eyebrow: .8125rem;

	--lh-tight: 1.15;
	--lh-heading: 1.3;
	--lh-body: 1.7;

	--ls-tight: -.02em;
	--ls-wide: .08em;
	--ls-wider: .16em;

	/* =========================================================
	   4. SPACING SCALE
	========================================================= */
	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;

	--section-padding-y: clamp(4.5rem, 7vw, 7.5rem);
	--section-padding-y-sm: clamp(3rem, 5vw, 5rem);

	/* =========================================================
	   5. RADIUS
	========================================================= */
	--radius-sm: .5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-xl: 2rem;
	--radius-2xl: 2.5rem;
	--radius-pill: 999px;
	--radius-circle: 50%;
	--radius-btn: 10px;

	/* =========================================================
	   6. SHADOWS
	========================================================= */
	--shadow-sm: 0 2px 10px rgba(var(--color-black-rgb), .06);
	--shadow-md: 0 10px 30px rgba(var(--color-black-rgb), .08);
	--shadow-lg: 0 24px 55px rgba(var(--color-black-rgb), .12);
	--shadow-xl: 0 34px 80px rgba(var(--color-black-rgb), .18);

	--shadow-glow-primary: 0 14px 40px rgba(var(--color-primary-rgb), .35);
	/* Paired with --gradient-brand (now solid Charcoal Plum) wherever a
	   component needs a second/"alt" accent — kept the name to avoid
	   touching every call site, but the glow itself is dark, not blue. */
	--shadow-glow-blue: 0 14px 40px rgba(var(--color-black-rgb), .25);
	--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, .5);

	/* =========================================================
	   7. GLASSMORPHISM
	========================================================= */
	--glass-bg-dark: rgba(255, 255, 255, .06);
	--glass-bg-light: rgba(255, 255, 255, .7);
	--glass-border-dark: rgba(255, 255, 255, .14);
	--glass-border-light: rgba(255, 255, 255, .5);
	--glass-blur: blur(20px);

	/* =========================================================
	   8. TRANSITIONS / MOTION
	========================================================= */
	--ease-base: cubic-bezier(.4, 0, .2, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

	--transition-fast: .2s var(--ease-base);
	--transition-base: .35s var(--ease-base);
	--transition-slow: .6s var(--ease-out);
	--transition-reveal: .8s var(--ease-out);

	/* =========================================================
	   9. LAYOUT
	========================================================= */
	--container-max: 1320px;
	--header-height: 92px;
	--header-height-scrolled: 72px;

	/* =========================================================
	   10. Z-INDEX SCALE
	========================================================= */
	--z-back: -1;
	--z-base: 1;
	--z-card: 10;
	--z-header: 1000;
	--z-overlay: 1100;
	--z-modal: 1200;
}