/*
 * Design tokens — values extracted from Figma (file: TEGOR Group - Web)
 * Frame canvas: 1440 desktop / 402 mobile
 * Source styles: H1 62/74 SemiBold, H2 42/52 Bold, H3 24/29 Medium,
 *                Body 21/33 Medium, Small 18/28 Regular, Button 16/25 Bold
 */

:root {
  /* ---------- Brand palette --------------------------------------------- */
  --color-ink: #1d1d1b;
  /* primary heading text */
  --color-ink-soft: #3c4959;
  /* body / secondary text */
  --color-ink-soft-2: #394049;
  /* alt body */
  --color-ink-mute: #637381;
  /* footer mute */
  --color-ink-divider: #ececec;
  --color-text-on-dark: #ffffff;

  --color-brand-deep: #005663;
  /* primary brand teal */
  --color-brand-deep-2: #1d5966;
  /* darker accent */
  --color-brand-mid: #4d8992;
  /* mid teal */
  --color-brand-pale: #b4ccd0;
  /* pale teal (cards, gradients) */
  --color-brand-pale-12: rgba(180, 204, 208, 0.12);
  --color-brand-pale-17: rgba(180, 204, 208, 0.17);
  --color-brand-pale-35: rgba(180, 204, 208, 0.35);
  --color-brand-deep-70: rgba(0, 86, 99, 0.7);
  --color-brand-deep-80: rgba(0, 86, 99, 0.8);

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f6f8f8;
  /* near-white teal-gray for sections */
  --color-overlay-dark: rgba(11, 25, 68, 0.55);
  --color-overlay-deep: rgba(0, 0, 0, 0.45);

  /* legacy aliases used by older components */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-text-inverse: #ffffff;
  --color-border: #ececec;
  --color-primary: var(--color-brand-deep);
  --color-primary-hover: var(--color-brand-deep-2);
  --color-primary-contrast: #ffffff;
  --color-accent: var(--color-brand-mid);
  --color-success: #16a34a;
  --color-danger: #dc2626;

  /* ---------- Typography ------------------------------------------------- */
  --font-sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Raleway", var(--font-sans);
  --font-stat: "Inter", "Raleway", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font sizes used in Figma (rem-relative to 16px root) */
  --fs-display-xl: 3.875rem;
  /* 62px H1 */
  --fs-display-lg: 3.5625rem;
  /* 57px About display */
  --fs-display-md: 3.1875rem;
  /* 51px Nuestro enfoque */
  --fs-display-sm: 2.625rem;
  /* 42px H2 */
  --fs-display-xs: 2.5rem;
  /* 40px CTA title */
  --fs-h3: 1.625rem;
  /* 26px card title */
  --fs-h4: 1.5rem;
  /* 24px feature card */
  --fs-stat: 3rem;
  /* 48px stat number */
  --fs-body-lg: 1.5625rem;
  /* 25px About large body */
  --fs-body-md: 1.3125rem;
  /* 21px intro */
  --fs-body: 1.125rem;
  /* 18px standard */
  --fs-body-sm: 1.0625rem;
  /* 17px history caption */
  --fs-small: 1rem;
  /* 16px footer link / button */
  --fs-tiny: 0.875rem;
  /* 14px micro / nav link */
  --fs-micro: 0.8125rem;
  /* 13px footer address */

  --lh-display-xl: 1.193;
  /* 74/62 */
  --lh-display-lg: 1.245;
  /* 71/57 */
  --lh-display-sm: 1.238;
  /* 52/42 */
  --lh-display-xs: 1.2;
  /* 48/40 */
  --lh-h3: 1.192;
  /* 31/26 */
  --lh-body: 1.556;
  /* 28/18 */
  --lh-body-md: 1.571;
  /* 33/21 */
  --lh-body-lg: 1.55;
  /* 38.75/25 */
  --lh-stat: 1.208;
  /* 58/48 */
  --lh-button: 1.5625;
  /* 25/16 */
  --lh-tiny: 1.571;
  /* 22/14 */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing ---------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Radii ------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(29, 29, 27, 0.06), 0 4px 16px rgba(29, 29, 27, 0.06);
  --shadow-elevated: 0 8px 24px rgba(29, 29, 27, 0.1);

  /* ---------- Layout ----------------------------------------------------- */
  --container-max: 1340px;
  --container-padding-inline: clamp(1.25rem, 4vw, 4rem);
  --header-height: 99px;
  --hero-height-desktop: 669px;
  --section-gap: clamp(2.5rem, 6vw, 6rem);

  /* ---------- Breakpoints (informational) ------------------------------- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---------- Buttons (Figma: coagipcy / "Descubrir") -------------------- */
  --btn-height: 55px;
  --btn-padding-inline: 30px;
  --btn-radius: 25px;
  --btn-border-width: 0px;
  --btn-border-color: transparent;
  --btn-bg: var(--color-brand-deep-70);
  --btn-bg-hover: var(--color-brand-deep-80);
  --btn-text: #ffffff;

  /* ---------- z-index ---------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 50;
  --z-overlay: 90;
  --z-modal: 100;

  --overlay-gradient: linear-gradient(180deg, rgba(0, 99, 91, 0.33) 0%, rgba(0, 99, 91, 0.79) 0.01%, rgba(255, 255, 255, 0.81) 20.8846%, rgba(255, 255, 255, 0.89) 100%);
  --overlay-opacity: 0.03;
  --box-shadow: inset 0 8px 6px -6px rgba(0, 99, 91, 0.03);
}