/* ============================================================
   GRUPO HEVIG — Colors & Type Foundation
   Socioeconomic studies / background verification — México
   ============================================================ */

/* ---------- FONTS ---------- */
/* Inter (self-hosted variable font, OFL-licensed — no license blocker) covers the
   full 100–900 weight range from two subset files. `--font-mono` falls through to
   the system-mono stack since Inter ships no separate monospace face. */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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: "Inter";
  src: url("fonts/Inter-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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 {
  /* ---------- BRAND CORE (from brand swatches) ---------- */
  --denim-blue:  #263F77;  /* primary — emblem outer, headings, brand */
  --gold:        #B69D67;  /* accent — emblem inner, highlights, rules */
  --cobalt-blue: #658FD4;  /* interactive — links, focus, data, hover */
  --charcoal:    #272425;  /* body text, near-black surfaces */

  /* ---------- DENIM SCALE (primary tints/shades) ---------- */
  --denim-900: #14213f;
  --denim-800: #1b2f59;
  --denim-700: #263F77;   /* = brand denim */
  --denim-600: #314e8e;
  --denim-500: #43619f;
  --denim-300: #8fa3c6;
  --denim-100: #d9e0ee;
  --denim-50:  #eef2f8;   /* faint denim wash */
  --denim-tint:#eef2f8;

  /* ---------- GOLD SCALE ---------- */
  --gold-700: #8f7943;
  --gold-600: #a38a55;
  --gold-500: #B69D67;    /* = brand gold */
  --gold-300: #d2c096;
  --gold-100: #ece3cd;
  --gold-tint:#f6f1e6;

  /* ---------- COBALT SCALE ---------- */
  --cobalt-700: #3f69ac;
  --cobalt-500: #658FD4;  /* = brand cobalt */
  --cobalt-300: #9bbae6;
  --cobalt-100: #d6e4f5;

  /* ---------- NEUTRALS (charcoal-biased grays) ---------- */
  --ink:    #272425;      /* = charcoal */
  --ink-80: #4a4749;
  --ink-60: #6f6c6e;
  --ink-40: #9a9799;
  --ink-25: #c4c2c3;
  --ink-12: #e2e0e1;
  --ink-06: #efeeee;
  --paper:  #f7f6f4;      /* warm off-white app/page bg */
  --surface:#ffffff;      /* card / panel */
  --white:  #ffffff;

  /* ---------- SEMANTIC: TEXT ---------- */
  --fg1: var(--charcoal);     /* primary text */
  --fg2: var(--ink-60);       /* secondary text */
  --fg3: var(--ink-40);       /* tertiary / captions */
  --fg-brand: var(--denim-blue);
  --fg-accent: var(--gold-700);
  --fg-link: var(--cobalt-700);
  --fg-on-dark: #ffffff;
  --fg-on-dark-2: #c6d0e4;    /* muted on denim */

  /* ---------- SEMANTIC: SURFACES ---------- */
  --bg-page:    var(--paper);
  --bg-surface: var(--surface);
  --bg-dark:    var(--denim-900);
  --bg-brand:   var(--denim-blue);
  --bg-muted:   var(--ink-06);

  /* ---------- SEMANTIC: STATUS (verification context) ---------- */
  --verified:   #2f8f5b;  /* approved / passed */
  --verified-bg:#e6f3eb;
  --pending:    #B69D67;  /* in review — uses brand gold */
  --pending-bg: #f6f1e6;
  --alert:      #c0492f;  /* flag / mismatch */
  --alert-bg:   #f8e8e4;

  /* ---------- BORDERS ---------- */
  --border:        #e2e0e1;
  --border-strong: #c4c2c3;
  --border-brand:  var(--denim-blue);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.55;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;   /* eyebrows / labels — brand uses ALL CAPS */

  /* ---------- RADII ---------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---------- SPACING ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- SHADOWS (cool, denim-tinted, restrained) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 33, 63, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 33, 63, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 33, 63, 0.10);
  --shadow-lg: 0 20px 48px rgba(20, 33, 63, 0.14);
  --ring-focus: 0 0 0 3px rgba(101, 143, 212, 0.45); /* cobalt focus ring */

  /* ---------- ALPHAS & OVERLAYS (on-dark surfaces, scrims) ---------- */
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a07: rgba(255, 255, 255, 0.07);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a20: rgba(255, 255, 255, 0.20);
  --white-a55: rgba(255, 255, 255, 0.55);
  --white-a78: rgba(255, 255, 255, 0.78);
  --denim-a06: rgba(20, 33, 63, 0.06);
  --denim-a40: rgba(20, 33, 63, 0.40);
  --overlay:   var(--denim-a40);        /* modal / drawer scrim */

  /* ---------- MOTION — TIER 1: micro-interactions ----------
     Hover, press, focus, toggles. Fast and functional. */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ---------- MOTION — TIER 2: expressive ----------
     Entrance/scroll reveals, hero choreography, ambient backdrops.
     Transform/opacity only; must disable under reduced motion. */
  --duration-reveal:  600ms;   /* section/element entrances */
  --duration-hero:    900ms;   /* hero choreography beats */
  --duration-ambient: 16s;     /* background drift — barely perceptible */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); /* signature expo-out */
  --reveal-distance: 18px;     /* translateY offset for entrances */
  --stagger-1: 60ms; --stagger-2: 120ms; --stagger-3: 180ms; --stagger-4: 240ms;

  /* ---------- MOTION — lifts (hover elevation) ---------- */
  --lift-sm: -2px;
  --lift-md: -4px;
  --lift-lg: -6px;
}

/* Reduced motion: kill ambient + entrance motion globally; keep pages complete. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   SEMANTIC TYPE — apply with classes or as a reference
   ============================================================ */
.gh-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-700);
}
.gh-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  text-wrap: balance;
}
.gh-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-brand);
  text-wrap: balance;
}
.gh-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.gh-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.gh-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg2);
  text-wrap: pretty;
}
.gh-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  text-wrap: pretty;
}
.gh-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.gh-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg3);
}
.gh-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--fg1);
}