/*
 * Aipxperts design tokens.
 *
 * Mirrors the active Novamira design system "Aipxperts Sharp Dark Marketing".
 * This file is the single source of truth for colour, type, spacing and motion
 * values used by marketing.css and by any custom block styling.
 *
 * If a value changes here it must also change in the saved DESIGN.md, so the
 * pre-flight check and the rendered site never drift apart.
 */

:root {
	/* Brand scale. #D52122 is the signal colour: primary actions, active states,
	   accents. It is never a fill for large areas. */
	--aipx-brand-50: #FDF2F2;
	--aipx-brand-100: #FADCDC;
	--aipx-brand-200: #F5B8B8;
	--aipx-brand-300: #EE8A8A;
	--aipx-brand-400: #E45555;
	--aipx-brand-500: #D52122;
	--aipx-brand-600: #B81B1C;
	--aipx-brand-700: #961617;
	--aipx-brand-800: #741112;
	--aipx-brand-900: #520C0C;

	/* Warm-biased neutrals, tuned to sit with the red. */
	--aipx-neutral-900: #1D1D1D;
	--aipx-neutral-800: #2A2A2A;
	--aipx-neutral-700: #3A3A3A;
	--aipx-neutral-600: #525252;
	--aipx-neutral-500: #737373;
	--aipx-neutral-400: #9A9A9A; /* placeholder text only - fails content contrast */
	--aipx-neutral-300: #B8B8B8;
	--aipx-neutral-200: #D1D1D1;
	--aipx-neutral-100: #E8E8E8;
	--aipx-neutral-50: #F5F5F5;

	/* The two grounds. There is no third. */
	--aipx-light-bg: #FFFEFC;
	--aipx-surface: #FFFFFF;
	--aipx-dark-bg: #0D0A0A;
	--aipx-dark-bg-raised: #141010;
	--aipx-dark-surface: #1A1414;
	--aipx-dark-surface-2: #221A1A;
	--aipx-footer-bg: #080606;

	/* Text */
	--aipx-text-heading: #1D1D1D;
	--aipx-text-body: #3A3A3A;
	--aipx-text-secondary: #47433F;
	--aipx-text-muted: #5C5854;
	--aipx-dark-text-heading: #FBF9F8;
	--aipx-dark-text-body: #B9B2AF;
	--aipx-dark-text-muted: #A39C98;
	--aipx-dark-eyebrow: #6E6764;
	--aipx-footer-text: #C9C3BE;

	/* Borders are hairline everywhere. Separation comes from these, not shadow. */
	--aipx-border: #D1D1D1;
	--aipx-border-subtle: #E8E8E8;
	--aipx-dark-border: rgba(255, 255, 255, .09);
	--aipx-dark-border-strong: rgba(255, 255, 255, .16);

	/* Red on dark uses the brighter glow for contrast. */
	--aipx-brand-glow: #E8312F;
	--aipx-dark-glow: rgba(213, 33, 34, .22);
	--aipx-dark-glow-strong: rgba(232, 49, 47, .30);

	/* Typography. Lato has no native 500/600, so headings resolve to 700
	   across H1-H5 and 400 for H6 rather than synthesising a fake weight. */
	--aipx-font-heading: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--aipx-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--aipx-font-mono: 'SFMono-Regular', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--aipx-h1-size: 52px;
	--aipx-h1-line: 62px;
	--aipx-h1-track: -1px;
	--aipx-h2-size: 44px;
	--aipx-h2-line: 54px;
	--aipx-h2-track: -0.75px;
	--aipx-h3-size: 36px;
	--aipx-h3-line: 46px;
	--aipx-h3-track: -0.5px;
	--aipx-h4-size: 30px;
	--aipx-h4-line: 40px;
	--aipx-h5-size: 24px;
	--aipx-h5-line: 34px;
	--aipx-h6-size: 20px;
	--aipx-h6-line: 30px;

	--aipx-body-lg: 18px;
	--aipx-body-lg-line: 28px;
	--aipx-body-md: 16px;
	--aipx-body-md-line: 24px;
	--aipx-body-sm: 14px;
	--aipx-body-sm-line: 20px;
	--aipx-caption: 12px;

	/* Spacing */
	--aipx-space-1: 4px;
	--aipx-space-2: 8px;
	--aipx-space-3: 12px;
	--aipx-space-4: 16px;
	--aipx-space-5: 20px;
	--aipx-space-6: 24px;
	--aipx-space-8: 32px;
	--aipx-space-10: 40px;
	--aipx-space-12: 48px;
	--aipx-space-16: 64px;
	--aipx-space-20: 80px;
	--aipx-space-24: 96px;
	--aipx-section-y-sm: 48px;
	--aipx-section-y-md: 80px;
	--aipx-section-y-lg: 96px;

	/* Shape. Zero, everywhere, on the public site. */
	--aipx-radius: 0px;

	/* Elevation. The marketing site uses almost no shadow. These two are the
	   only sanctioned exceptions: the hero glass panel and an emphasised CTA. */
	--aipx-shadow-glass: 0 12px 28px rgba(29, 29, 29, .10), 0 2px 6px rgba(29, 29, 29, .05);
	--aipx-shadow-brand: 0 4px 14px rgba(213, 33, 34, .24);

	/* Motion. The site is deliberately static; these govern hover and disclosure only. */
	--aipx-duration-fast: 150ms;
	--aipx-duration-base: 200ms;
	--aipx-duration-slow: 300ms;
	--aipx-ease-standard: cubic-bezier(.4, 0, .2, 1);
	--aipx-ease-out: cubic-bezier(0, 0, .2, 1);
	--aipx-ease-in: cubic-bezier(.4, 0, 1, 1);

	/* Layout */
	--aipx-container: 1200px;
	--aipx-header-height: 72px;
}