/* ============================================================
 * GGA Soluciones — Design Tokens
 * Source of truth for colors, typography, spacing, radii,
 * shadows, easing curves, and semantic style aliases.
 *
 * Extracted from: source_web/style.css (production marketing site)
 * Brand spec:    source_docs/IDENTIDAD_GGA.md, BRAND_RULES.md
 *
 * Theme: Dark-first · Orange accent (#FF6A00) on near-black (#080F14)
 * Fonts: Montserrat (display/UI) + Inter (body) — Google Fonts
 * ============================================================ */

/* Webfonts. The production site loads these via Google Fonts CDN;
 * to keep parity we do the same here. See README.md → "Fonts" for
 * the substitution flag if you need self-hosted files. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ─────────────────────────────────────────────────────────
   * RAW COLOR TOKENS
   * ───────────────────────────────────────────────────────── */

  /* Surfaces — darkest at the page level, lifting in steps */
  --gga-bg:        #080F14;  /* page background, near-black with a hint of cyan */
  --gga-bg-2:      #0C1520;  /* alternating section background */
  --gga-surface:   #111927;  /* card / panel / footer */
  --gga-surface-2: #1A202C;  /* raised surface */
  --gga-surface-3: #222C3A;  /* highest elevation, scrollbar thumb */

  /* Brand orange — the only non-neutral accent on the site */
  --gga-primary:   #FF6A00;  /* primary CTA, links, eyebrow text, active states */
  --gga-primary-d: #D95800;  /* primary pressed / dark on light bg */
  --gga-primary-l: #FF8533;  /* primary hover, gradient highlight */
  --gga-logo-orange: #F26203; /* exact orange used in the SVG logo (slightly warmer) */
  --gga-logo-bone:   #EAE9EA; /* off-white used for the wordmark */

  /* Text — high-contrast white-ish stack on dark */
  --gga-text:   #E6E8EC;  /* primary body / headings */
  --gga-text-2: #A8B3C0;  /* secondary body, leads, captions */
  --gga-muted:  #7A8594;  /* tertiary, labels, breadcrumbs, eyebrow when neutral */

  /* Borders — semi-transparent white on dark surfaces */
  --gga-border:    rgba(255, 255, 255, 0.07);  /* default hairline */
  --gga-border-2:  rgba(255, 255, 255, 0.12);  /* hover / emphasized */
  --gga-glow:      rgba(255, 106, 0, 0.18);    /* orange halo around CTAs */

  /* Semantic — kept narrow on purpose; the site reuses these
   * sparingly (success ticks, error fields, warning badges) */
  --gga-success: #22C55E;  /* check-list ticks, "after" column, KPI positive */
  --gga-success-soft: rgba(34, 197, 94, 0.12);
  --gga-error:   #F87171;  /* form field error border */
  --gga-error-soft: rgba(248, 113, 113, 0.10);
  --gga-warning: #F59E0B;  /* testimonial stars */
  --gga-info:    #34C759;  /* form field valid */
  --gga-mac-red:    #FF5F57;  /* mockup window-control dot */
  --gga-mac-yellow: #FEBC2E;  /* mockup window-control dot */
  --gga-mac-green:  #28C840;  /* mockup window-control dot */
  --gga-whatsapp:   #25D366;  /* WhatsApp float button */

  /* ─────────────────────────────────────────────────────────
   * LIGHT SECTION TOKENS
   * Used by alternating light-background sections only.
   * ───────────────────────────────────────────────────────── */
  --gga-bg-light:             #F5F7FA;
  --gga-surface-light:        #FFFFFF;
  --gga-surface-light-2:      #F8FAFC;
  --gga-text-on-light:        #080F14;
  --gga-text-on-light-2:      #3A4452;
  --gga-text-on-light-3:      #526071;
  --gga-text-on-light-muted:  #64748B;
  --gga-border-light:         rgba(8, 15, 20, 0.08);
  --gga-border-light-subtle:  rgba(8, 15, 20, 0.06);
  --gga-shadow-light-sm:      0 10px 30px rgba(8, 15, 20, 0.04);
  --gga-shadow-light-md:      0 12px 36px rgba(8, 15, 20, 0.05);
  --gga-shadow-light-lg:      0 24px 64px rgba(8, 15, 20, 0.11);

  /* ─────────────────────────────────────────────────────────
   * TYPOGRAPHY
   * ───────────────────────────────────────────────────────── */
  --gga-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gga-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gga-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — production site uses clamp() for fluid headings.
   * Static fallbacks here for components that need fixed values. */
  --gga-text-eyebrow:  11px;   /* uppercase, letter-spaced 0.14em, weight 700 */
  --gga-text-label:    12px;   /* small caps labels, KPI labels */
  --gga-text-caption:  13px;   /* footnotes, breadcrumbs */
  --gga-text-body-sm:  14px;
  --gga-text-body:     15px;   /* default body */
  --gga-text-lead:     17px;   /* hero lead, section intro */
  --gga-text-h4:       15px;
  --gga-text-h3:       22px;
  --gga-text-h2:       44px;   /* clamps from 28 */
  --gga-text-h1:       60px;   /* clamps from 38 */

  /* Weights — Montserrat goes heavy for display, Inter stays mid */
  --gga-weight-regular: 400;
  --gga-weight-medium:  500;
  --gga-weight-semi:    600;
  --gga-weight-bold:    700;
  --gga-weight-black:   800;

  /* Letter-spacing — display is tight, eyebrow/labels are wide */
  --gga-track-display:  -0.03em;  /* h1 */
  --gga-track-heading:  -0.02em;  /* h2 */
  --gga-track-body:      0em;
  --gga-track-label:     0.07em;  /* KPI labels, chart labels */
  --gga-track-eyebrow:   0.14em;  /* uppercase eyebrow */

  /* Line height */
  --gga-leading-tight:   1.08;  /* h1 */
  --gga-leading-heading: 1.15;  /* h2 */
  --gga-leading-snug:    1.3;   /* h3 */
  --gga-leading-body:    1.6;   /* default */
  --gga-leading-lead:    1.75;  /* lead paragraphs */

  /* ─────────────────────────────────────────────────────────
   * SPACING — site uses an informal 4/8/16/24/32/40/48/64/100 scale
   * ───────────────────────────────────────────────────────── */
  --gga-space-1:   4px;
  --gga-space-2:   8px;
  --gga-space-3:   12px;
  --gga-space-4:   16px;
  --gga-space-5:   20px;
  --gga-space-6:   24px;
  --gga-space-8:   32px;
  --gga-space-10:  40px;
  --gga-space-12:  48px;
  --gga-space-16:  64px;
  --gga-space-20:  80px;
  --gga-space-section: 100px;   /* vertical rhythm between full sections */
  --gga-container-max: 1160px;  /* max content width */

  /* ─────────────────────────────────────────────────────────
   * RADII
   * ───────────────────────────────────────────────────────── */
  --gga-radius-sm: 8px;    /* inputs, small chips, icon tiles */
  --gga-radius:    14px;   /* default — buttons, cards */
  --gga-radius-lg: 20px;   /* large cards, pain/benefit cards */
  --gga-radius-xl: 28px;   /* hero mockup, form-card, premium service card */
  --gga-radius-pill: 999px;

  /* ─────────────────────────────────────────────────────────
   * SHADOWS / ELEVATION
   * ───────────────────────────────────────────────────────── */
  --gga-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
  --gga-shadow:    0 16px 40px rgba(0, 0, 0, 0.30);   /* cards, lifted state */
  --gga-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.40);   /* form card */
  --gga-shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.70);  /* hero mockup */
  --gga-shadow-cta: 0 4px 16px rgba(255, 106, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
  --gga-shadow-cta-hover: 0 8px 28px rgba(255, 106, 0, 0.40);
  --gga-shadow-glow: 0 0 80px rgba(255, 106, 0, 0.10);
  --gga-shadow-inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* ─────────────────────────────────────────────────────────
   * MOTION
   * ───────────────────────────────────────────────────────── */
  --gga-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* default */
  --gga-spring: cubic-bezier(0.23, 1, 0.32, 1);          /* strong ease-out for UI interactions */
  --gga-dur-fast:   0.18s;
  --gga-dur-base:   0.25s;
  --gga-dur-slow:   0.6s;

  /* ─────────────────────────────────────────────────────────
   * BACKGROUNDS — Spotlights and texture
   * Use as additional layers behind sections to recreate the
   * site's "depth in the dark" feel.
   * ───────────────────────────────────────────────────────── */
  --gga-spotlight-hero:
    radial-gradient(ellipse 900px 600px at 75% 40%, rgba(255,106,0,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 10% 90%, rgba(255,106,0,0.03)  0%, transparent 60%);
  --gga-spotlight-page:
    radial-gradient(circle at 10% 10%, rgba(255,106,0,0.03) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(255,106,0,0.02) 0%, transparent 40%);
  --gga-noise-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gga-noise-opacity: 0.025;

  /* ─────────────────────────────────────────────────────────
   * SEMANTIC ALIASES — preferred names for component code.
   * Map the raw tokens above to role-based variables. Use these
   * (not the raw ones) when writing new components.
   * ───────────────────────────────────────────────────────── */
  --bg:         var(--gga-bg);
  --bg-2:       var(--gga-bg-2);
  --surface:    var(--gga-surface);
  --surface-2:  var(--gga-surface-2);
  --surface-3:  var(--gga-surface-3);
  --primary:    var(--gga-primary);
  --primary-d:  var(--gga-primary-d);
  --primary-l:  var(--gga-primary-l);
  --text:       var(--gga-text);
  --text-2:     var(--gga-text-2);
  --muted:      var(--gga-muted);
  --border:     var(--gga-border);
  --border-2:   var(--gga-border-2);
  --glow:       var(--gga-glow);

  --font-heading: var(--gga-font-heading);
  --font-body:    var(--gga-font-body);
  --ease:         var(--gga-ease);
  --spring:       var(--gga-spring);

  --radius-sm: var(--gga-radius-sm);
  --radius:    var(--gga-radius);
  --radius-lg: var(--gga-radius-lg);
  --radius-xl: var(--gga-radius-xl);
}

/* ============================================================
 * SEMANTIC TYPE STYLES
 * Use these classes directly on elements when you don't want
 * to redefine the rules. They match the production CSS exactly.
 * ============================================================ */
.gga-h1 {
  font-family: var(--gga-font-heading);
  font-size: clamp(38px, 5.5vw, 60px);
  line-height: var(--gga-leading-tight);
  letter-spacing: var(--gga-track-display);
  font-weight: var(--gga-weight-black);
  color: var(--gga-text);
}
.gga-h2 {
  font-family: var(--gga-font-heading);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: var(--gga-leading-heading);
  letter-spacing: var(--gga-track-heading);
  font-weight: var(--gga-weight-bold);
  color: var(--gga-text);
}
.gga-h3 {
  font-family: var(--gga-font-heading);
  font-size: clamp(18px, 2vw, 22px);
  line-height: var(--gga-leading-snug);
  font-weight: var(--gga-weight-bold);
  color: var(--gga-text);
}
.gga-h4 {
  font-family: var(--gga-font-heading);
  font-size: var(--gga-text-h4);
  font-weight: var(--gga-weight-semi);
  letter-spacing: 0.01em;
  color: var(--gga-text);
}
.gga-lead {
  font-family: var(--gga-font-body);
  font-size: var(--gga-text-lead);
  line-height: var(--gga-leading-lead);
  color: var(--gga-text-2);
}
.gga-body {
  font-family: var(--gga-font-body);
  font-size: var(--gga-text-body);
  line-height: var(--gga-leading-body);
  color: var(--gga-text-2);
}
.gga-eyebrow {
  font-family: var(--gga-font-heading);
  font-size: var(--gga-text-eyebrow);
  font-weight: var(--gga-weight-bold);
  letter-spacing: var(--gga-track-eyebrow);
  text-transform: uppercase;
  color: var(--gga-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gga-label {
  font-family: var(--gga-font-heading);
  font-size: var(--gga-text-label);
  font-weight: var(--gga-weight-semi);
  letter-spacing: var(--gga-track-label);
  text-transform: uppercase;
  color: var(--gga-muted);
}
.gga-caption {
  font-family: var(--gga-font-body);
  font-size: var(--gga-text-caption);
  color: var(--gga-muted);
}
.gga-accent { color: var(--gga-primary); }