/**
 * Design tokens — Figma "GAEF" › Design System (Plata con Plática v2).
 * Primitives → semantics → typography, spacing, effects and layout.
 * Text sizes and layout change per breakpoint:
 * mobile < 768px ≤ tablet < 1200px ≤ desktop.
 */

:root {
	/* ==========================================================
	   Primitives
	   ========================================================== */

	--color-white: #ffffff;
	--color-black: #000000;

	/* Indigo: the dark brand purple (backgrounds, text). */
	--color-indigo-50: #f6f6fe;
	--color-indigo-100: #ebebfe;
	--color-indigo-200: #d7d6ff;
	--color-indigo-300: #bdb9fe;
	--color-indigo-400: #a199f1;
	--color-indigo-500: #867cd8;
	--color-indigo-600: #6c61ba;
	--color-indigo-700: #55499b;
	--color-indigo-800: #40357b;
	--color-indigo-900: #261f4d;
	--color-indigo-950: #1c173a;

	--color-purple-50: #f7f6fe;
	--color-purple-100: #efecff;
	--color-purple-200: #dfd8fe;
	--color-purple-300: #cabbff;
	--color-purple-400: #b398ff;
	--color-purple-500: #9a7de1;
	--color-purple-600: #8263c5;
	--color-purple-700: #6b4baa;
	--color-purple-800: #583491;
	--color-purple-900: #3d1a6c;
	--color-purple-950: #2f1553;

	--color-gold-50: #fdf5e1;
	--color-gold-100: #fceac0;
	--color-gold-200: #f0d6a0;
	--color-gold-300: #d6ad55;
	--color-gold-400: #c59e4e;
	--color-gold-500: #a68340;
	--color-gold-600: #886a33;
	--color-gold-700: #6b5328;
	--color-gold-800: #523e1c;
	--color-gold-900: #372810;
	--color-gold-950: #221808;

	--color-lavender-50: #f9f5fe;
	--color-lavender-100: #f3e7ff;
	--color-lavender-200: #e6d0ff;
	--color-lavender-300: #d5b0f9;
	--color-lavender-400: #af8bd2;
	--color-lavender-500: #a073ca;
	--color-lavender-600: #8558ad;
	--color-lavender-700: #6b418f;
	--color-lavender-800: #532e71;
	--color-lavender-900: #371c4e;
	--color-lavender-950: #211030;

	--color-blue-50: #f3f7ff;
	--color-blue-100: #e5edfe;
	--color-blue-200: #cadbff;
	--color-blue-300: #a7c2fe;
	--color-blue-400: #7ea3fb;
	--color-blue-500: #6186e2;
	--color-blue-600: #5371ba;
	--color-blue-700: #3352a4;
	--color-blue-800: #233c83;
	--color-blue-900: #14265b;
	--color-blue-950: #0a1639;

	--color-iris-600: #499cc5;
	--color-iris-700: #404590;

	--color-neutral-50: #f6f6ff;
	--color-neutral-100: #ececf5;
	--color-neutral-200: #dadae2;
	--color-neutral-300: #c2c1ca;
	--color-neutral-400: #a5a5ae;
	--color-neutral-500: #8a8a92;
	--color-neutral-600: #6f6f77;
	--color-neutral-700: #57575f;
	--color-neutral-800: #424249;
	--color-neutral-900: #2b2b31;
	--color-neutral-950: #19191f;

	--color-green-50: #e6ffe7;
	--color-green-100: #cefbd0;
	--color-green-200: #b1edb5;
	--color-green-300: #8dd892;
	--color-green-400: #64be6d;
	--color-green-500: #3da34c;
	--color-green-600: #178730;
	--color-green-700: #046b21;
	--color-green-800: #025117;
	--color-green-900: #02360d;
	--color-green-950: #002105;

	--color-red-50: #fef4f3;
	--color-red-100: #ffe6e3;
	--color-red-200: #fecdc7;
	--color-red-300: #ffa99e;
	--color-red-400: #fe766a;
	--color-red-500: #ea4b43;
	--color-red-600: #ca2727;
	--color-red-700: #a70311;
	--color-red-800: #81020a;
	--color-red-900: #580105;
	--color-red-950: #380002;

	--color-amber-50: #fff5eb;
	--color-amber-100: #ffe9d2;
	--color-amber-200: #ffd2a0;
	--color-amber-300: #f9b25d;
	--color-amber-400: #e39115;
	--color-amber-500: #c07803;
	--color-amber-600: #9c6106;
	--color-amber-700: #7c4c00;
	--color-amber-800: #5e3903;
	--color-amber-900: #3f2502;
	--color-amber-950: #271500;

	--color-social-whatsapp: #25d366;

	--color-alpha-black-4: rgba(0, 0, 0, 0.04);
	--color-alpha-black-8: rgba(0, 0, 0, 0.08);
	--color-alpha-black-10: rgba(0, 0, 0, 0.1);
	--color-alpha-black-25: rgba(0, 0, 0, 0.25);
	--color-alpha-white-8: rgba(255, 255, 255, 0.08);
	--color-alpha-white-30: rgba(255, 255, 255, 0.3);
	--color-alpha-indigo-950-20: rgba(28, 23, 58, 0.2);
	--color-alpha-indigo-950-60: rgba(28, 23, 58, 0.6);

	/* ==========================================================
	   Semantic: text
	   ========================================================== */

	--text-primary: var(--color-indigo-900);
	--text-secondary: var(--color-neutral-600);
	--text-tertiary: var(--color-neutral-500);
	--text-disabled: var(--color-neutral-400);
	--text-brand: var(--color-indigo-900);
	--text-eyebrow: var(--color-indigo-800);
	--text-accent: var(--color-gold-600);
	--text-highlight: var(--color-lavender-600);
	--text-link: var(--color-blue-700);
	--text-link-hover: var(--color-blue-800);
	--text-on-accent: var(--color-indigo-900);
	--text-inverse: var(--color-white);
	--text-inverse-secondary: var(--color-neutral-300);
	--text-accent-inverse: var(--color-gold-300);
	--text-success: var(--color-green-700);
	--text-warning: var(--color-amber-700);
	--text-error: var(--color-red-700);
	--text-info: var(--color-blue-700);

	/* ==========================================================
	   Semantic: surfaces
	   ========================================================== */

	--surface-page: var(--color-white);
	--surface-default: var(--color-white);
	--surface-subtle: var(--color-neutral-50);
	--surface-muted: var(--color-neutral-100);
	--surface-brand: var(--color-indigo-900);
	--surface-brand-strong: var(--color-indigo-950);
	--surface-brand-elevated: #2a2546;
	--surface-brand-soft: var(--color-indigo-50);
	--surface-accent: var(--color-gold-300);
	--surface-accent-soft: var(--color-gold-50);
	--surface-highlight: var(--color-lavender-400);
	--surface-highlight-soft: var(--color-lavender-50);
	--surface-info: var(--color-blue-600);
	--surface-info-soft: var(--color-blue-50);
	--surface-success: var(--color-green-600);
	--surface-success-soft: var(--color-green-50);
	--surface-warning: var(--color-amber-400);
	--surface-warning-soft: var(--color-amber-50);
	--surface-error: var(--color-red-600);
	--surface-error-soft: var(--color-red-50);
	--surface-inverse: var(--color-indigo-950);
	--surface-header-transparent: rgba(28, 23, 58, 0.4);

	/* ==========================================================
	   Semantic: borders
	   ========================================================== */

	--border-subtle: var(--color-neutral-100);
	--border-default: var(--color-neutral-200);
	--border-strong: var(--color-neutral-400);
	--border-brand: var(--color-indigo-900);
	--border-brand-elevated: #3c3756;
	--border-accent: var(--color-gold-300);
	--border-highlight: var(--color-lavender-400);
	--border-focus: var(--color-blue-500);
	--border-error: var(--color-red-600);
	--border-success: var(--color-green-600);
	--border-inverse: rgba(255, 255, 255, 0.16);
	--border-inverse-subtle: rgba(255, 255, 255, 0.08);

	/* ==========================================================
	   Semantic: icons
	   ========================================================== */

	--icon-primary: var(--color-indigo-900);
	--icon-secondary: var(--color-neutral-600);
	--icon-accent: var(--color-gold-300);
	--icon-highlight: var(--color-lavender-400);
	--icon-inverse: var(--color-white);
	--icon-disabled: var(--color-neutral-400);
	--icon-success: var(--color-green-600);
	--icon-warning: var(--color-amber-500);
	--icon-error: var(--color-red-600);

	/* ==========================================================
	   Semantic: actions
	   ========================================================== */

	--action-primary-bg: var(--color-gold-300);
	--action-primary-bg-hover: var(--color-gold-400);
	--action-primary-bg-pressed: var(--color-gold-500);
	--action-primary-fg: var(--color-indigo-900);
	--action-secondary-bg: transparent;
	--action-secondary-bg-hover: var(--color-indigo-50);
	--action-secondary-bg-pressed: var(--color-indigo-100);
	--action-secondary-border: var(--color-indigo-900);
	--action-secondary-fg: var(--color-indigo-900);
	--action-tertiary-fg: var(--color-gold-600);
	--action-tertiary-fg-hover: var(--color-gold-700);
	--action-inverse-bg: transparent;
	--action-inverse-bg-hover: rgba(255, 255, 255, 0.08);
	--action-inverse-bg-pressed: rgba(255, 255, 255, 0.16);
	--action-inverse-border: var(--color-white);
	--action-inverse-fg: var(--color-white);
	--action-inverse-gold-fg: var(--color-gold-300);
	--action-inverse-gold-bg-hover: rgba(214, 173, 85, 0.1);
	--action-inverse-gold-bg-pressed: rgba(214, 173, 85, 0.18);
	--action-whatsapp-bg: var(--color-social-whatsapp);
	--action-disabled-bg: var(--color-neutral-100);
	--action-disabled-fg: var(--color-neutral-400);
	--action-disabled-border: var(--color-neutral-200);

	/* ==========================================================
	   Overlays
	   ========================================================== */

	--overlay-scrim: rgba(28, 23, 58, 0.8);
	--overlay-image-dim: rgba(0, 0, 0, 0.1);
	--overlay-image-shade: rgba(0, 0, 0, 0.65);
	--overlay-hover: rgba(0, 0, 0, 0.04);

	/* ==========================================================
	   Gradients
	   ========================================================== */

	/* Overlays for photos and video. */
	--gradient-hero-overlay: linear-gradient(180deg, var(--color-indigo-950) 0%, rgba(28, 23, 58, 0.85) 20%, rgba(28, 23, 58, 0) 60%);
	--gradient-hero-overlay-right:
		linear-gradient(180deg, rgba(28, 23, 58, 0) 55%, rgba(28, 23, 58, 0.85) 100%),
		linear-gradient(270deg, rgba(28, 23, 58, 0.92) 0%, rgba(28, 23, 58, 0.7) 45%, rgba(28, 23, 58, 0.2) 100%);
	--gradient-image-shade: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	--gradient-brand-shade: linear-gradient(180deg, rgba(38, 31, 77, 0) 20%, var(--color-indigo-900) 70%);

	/* Backgrounds. */
	--gradient-brand: linear-gradient(152deg, var(--color-indigo-900) 0%, var(--color-indigo-700) 100%);
	--gradient-brand-deep: linear-gradient(180deg, var(--color-indigo-950) 0%, var(--color-indigo-900) 100%);
	--gradient-brand-bg: linear-gradient(180deg, var(--color-indigo-900) 0%, var(--color-blue-700) 100%);
	--gradient-clients-bg: linear-gradient(180deg, var(--color-indigo-950) 0%, var(--color-blue-700) 100%);
	--gradient-gold: linear-gradient(152deg, var(--color-gold-200) 0%, var(--color-gold-300) 50%, var(--color-gold-500) 100%);
	--gradient-lavender-blue: linear-gradient(152deg, var(--color-lavender-400) 0%, var(--color-blue-600) 100%);
	--gradient-iris: linear-gradient(152deg, var(--color-iris-700) 0%, var(--color-iris-600) 100%);

	/* Metallic gold: Primary button and shiny text. */
	--gradient-gold-metallic: linear-gradient(90deg, var(--color-gold-500) 0%, var(--color-gold-200) 45%, var(--color-gold-300) 70%, var(--color-gold-500) 100%);
	--gradient-gold-metallic-hover: linear-gradient(90deg, var(--color-gold-400) 0%, var(--color-gold-100) 45%, var(--color-gold-200) 70%, var(--color-gold-400) 100%);
	--gradient-gold-metallic-pressed: linear-gradient(90deg, var(--color-gold-600) 0%, var(--color-gold-300) 45%, var(--color-gold-400) 70%, var(--color-gold-600) 100%);

	/* ==========================================================
	   Spacing
	   ========================================================== */

	--space-0: 0;
	--space-2: 2px;
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--space-48: 48px;
	--space-56: 56px;
	--space-64: 64px;
	--space-80: 80px;
	--space-96: 96px;
	--space-120: 120px;
	--space-160: 160px;

	/* ==========================================================
	   Radii and borders
	   ========================================================== */

	--radius-none: 0;
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-2xl: 32px;
	--radius-full: 9999px;
	--border-width-1: 1px;
	--border-width-2: 2px;

	/* ==========================================================
	   Elevation and effects
	   ========================================================== */

	--elevation-xs: 0 1px 2px var(--color-alpha-black-8);
	--elevation-sm: 0 2px 8px var(--color-alpha-black-8);
	--elevation-md: 0 4px 16px var(--color-alpha-black-8), 0 1px 3px var(--color-alpha-black-4);
	--elevation-lg: 0 12px 32px -4px var(--color-alpha-black-10), 0 4px 8px var(--color-alpha-black-4);
	--elevation-xl: 0 24px 48px -8px var(--color-alpha-black-25);
	--focus-ring: 0 0 0 3px var(--border-focus);

	/* Glass (backdrop-filter) and blurred header. */
	--blur-header: 16px;
	--glass-blur: 20px;
	--glass-elevated-shadow: 0 24px 60px rgba(13, 5, 31, 0.5);

	/* ==========================================================
	   Typography — families and weights
	   ========================================================== */

	--font-family-display: "Oswald", "Arial Narrow", sans-serif;
	--font-family-heading: "Oswald", "Arial Narrow", sans-serif;
	--font-family-label: "Oswald", "Arial Narrow", sans-serif;
	--font-family-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-family-serif: "Calps Slim", Georgia, serif;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* ==========================================================
	   Typography — sizes (desktop)
	   ========================================================== */

	--font-size-display-2xl: 120px;
	--font-line-height-display-2xl: 112px;
	--font-size-display-xl: 96px;
	--font-line-height-display-xl: 96px;
	--font-size-display-lg: 72px;
	--font-line-height-display-lg: 80px;
	--font-size-display-md: 56px;
	--font-line-height-display-md: 59px;
	--font-size-display-sm: 40px;
	--font-line-height-display-sm: 44px;

	--font-size-serif-lg: 40px;
	--font-line-height-serif-lg: 48px;
	--font-size-serif-md: 28px;
	--font-line-height-serif-md: 35px;

	--font-size-heading-h1: 52px;
	--font-line-height-heading-h1: 60px;
	--font-size-heading-h2: 44px;
	--font-line-height-heading-h2: 52px;
	--font-size-heading-h3: 32px;
	--font-line-height-heading-h3: 40px;
	--font-size-heading-h4: 28px;
	--font-line-height-heading-h4: 34px;
	--font-size-heading-h5: 22px;
	--font-line-height-heading-h5: 28px;
	--font-size-heading-h6: 20px;
	--font-line-height-heading-h6: 26px;

	--font-size-body-lg: 20px;
	--font-line-height-body-lg: 32px;
	--font-size-body-md: 18px;
	--font-line-height-body-md: 29px;
	--font-size-body-sm: 16px;
	--font-line-height-body-sm: 24px;
	--font-size-body-caption: 12px;
	--font-line-height-body-caption: 17px;

	--font-size-label-lg: 16px;
	--font-line-height-label-lg: 22px;
	--font-size-label-md: 15px;
	--font-line-height-label-md: 20px;
	--font-size-label-eyebrow: 24px;
	--font-line-height-label-eyebrow: 32px;
	--font-letter-spacing-label-eyebrow: 2px;
	--font-size-label-nav: 13px;
	--font-line-height-label-nav: 16px;
	--font-letter-spacing-label-nav: 2px;
	--font-size-label-cta: 15px;
	--font-line-height-label-cta: 18px;

	--font-size-button-lg: 16px;
	--font-line-height-button-lg: 19px;
	--font-letter-spacing-button-lg: 0.5px;
	--font-size-button-md: 14px;
	--font-line-height-button-md: 17px;
	--font-letter-spacing-button-md: 0.5px;

	/* ==========================================================
	   Layout (desktop)
	   ========================================================== */

	--layout-container: 1312px;
	/* 144px at 1600px wide; shrinks on narrower desktop screens. */
	--layout-margin: clamp(40px, 9vw, 144px);
	/* Side margin for full-width sections: the design one, or the one that centers the container. */
	--layout-inline: max(var(--layout-margin), calc((100% - var(--layout-container)) / 2));
	--layout-gutter: 24px;
	--layout-columns: 12;
	--layout-section-padding: 120px;
	--layout-section-gap: 64px;
	--layout-stack-gap: 32px;
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1199px) {
	:root {
		--font-size-display-2xl: 88px;
		--font-line-height-display-2xl: 84px;
		--font-size-display-xl: 76px;
		--font-line-height-display-xl: 76px;
		--font-size-display-lg: 60px;
		--font-line-height-display-lg: 60px;
		--font-size-display-md: 48px;
		--font-line-height-display-md: 50px;
		--font-size-display-sm: 36px;
		--font-line-height-display-sm: 40px;

		--font-size-serif-lg: 34px;
		--font-line-height-serif-lg: 41px;
		--font-size-serif-md: 24px;
		--font-line-height-serif-md: 30px;

		--font-size-heading-h1: 45px;
		--font-line-height-heading-h1: 52px;
		--font-size-heading-h2: 39px;
		--font-line-height-heading-h2: 46px;
		--font-size-heading-h3: 30px;
		--font-line-height-heading-h3: 38px;
		--font-size-heading-h4: 26px;
		--font-line-height-heading-h4: 32px;
		--font-size-heading-h5: 21px;
		--font-line-height-heading-h5: 27px;
		--font-size-heading-h6: 19px;
		--font-line-height-heading-h6: 25px;

		--layout-container: 688px;
		--layout-margin: 40px;
		--layout-gutter: 20px;
		--layout-columns: 8;
		--layout-section-padding: 88px;
		--layout-section-gap: 48px;
		--layout-stack-gap: 24px;
	}
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {
	:root {
		--font-size-label-eyebrow: 23px;
		--font-line-height-label-eyebrow: 30px;
		--font-size-display-2xl: 60px;
		--font-line-height-display-2xl: 58px;
		--font-size-display-xl: 56px;
		--font-line-height-display-xl: 56px;
		--font-size-display-lg: 44px;
		--font-line-height-display-lg: 44px;
		--font-size-display-md: 36px;
		--font-line-height-display-md: 38px;
		--font-size-display-sm: 28px;
		--font-line-height-display-sm: 31px;

		--font-size-serif-lg: 28px;
		--font-line-height-serif-lg: 34px;
		--font-size-serif-md: 22px;
		--font-line-height-serif-md: 28px;

		--font-size-heading-h1: 38px;
		--font-line-height-heading-h1: 43px;
		--font-size-heading-h2: 34px;
		--font-line-height-heading-h2: 40px;
		--font-size-heading-h3: 27px;
		--font-line-height-heading-h3: 34px;
		--font-size-heading-h4: 23px;
		--font-line-height-heading-h4: 29px;
		--font-size-heading-h5: 20px;
		--font-line-height-heading-h5: 25px;
		--font-size-heading-h6: 18px;
		--font-line-height-heading-h6: 23px;

		--font-size-body-lg: 19px;
		--font-line-height-body-lg: 30px;

		--font-size-label-lg: 15px;
		--font-line-height-label-lg: 21px;
		--font-size-label-md: 14px;
		--font-line-height-label-md: 18px;

		--font-size-button-lg: 15px;
		--font-line-height-button-lg: 18px;

		--layout-container: 350px;
		--layout-margin: 20px;
		--layout-gutter: 16px;
		--layout-columns: 4;
		--layout-section-padding: 64px;
		--layout-section-gap: 40px;
		--layout-stack-gap: 20px;
	}
}