/* ============================================================
   FUNJOSE Design System — global entry point.
   Consumers link THIS file. Import list only.
   ============================================================ */


/* ============================================================
   FUNJOSE · Color tokens
   Institutional palette. Navy = identity & structure.
   Gold = action & impact. Light surfaces dominate.
   ============================================================ */

:root {
  /* ---- Brand: Azul institucional (#08025F) ---------------- */
  /* Education · trust · stability · institutionality.         */
  /* Use for nav, titles, footer, links, brand components.     */
  --navy-900: #050135;
  --navy-800: #08025F; /* ★ institutional blue — the brand */
  --navy-700: #130C7A;
  --navy-600: #221A92;
  --navy-500: #3A33AE;
  --navy-300: #9E9AD2;
  --navy-200: #C8C5E6;
  --navy-100: #E5E4F2;
  --navy-50:  #F0EFF9;

  /* ---- Brand: Dorado institucional (#FEA900) -------------- */
  /* From the birrete's tassel. Opportunity · achievement.     */
  /* Energy / accent / primary action — never a full surface.  */
  --gold-700: #B87900;
  --gold-600: #DB9300;
  --gold-500: #FEA900; /* ★ institutional gold — action */
  --gold-400: #FFBE3D;
  --gold-200: #FFE3A6;
  --gold-100: #FFF1D1;
  --gold-50:  #FFF9EC;

  /* ---- Support: Celeste (#0077B6) ------------------------- */
  /* Clarity · closeness · information · transparency.         */
  /* Alternating sections, info cards, FAQ, educational copy.  */
  --sky-700: #005586;
  --sky-600: #00669E;
  --sky-500: #0077B6; /* ★ celeste */
  --sky-400: #339AD0;
  --sky-200: #ABD5F0;
  --sky-100: #D9EEF8;
  --sky-50:  #ECF6FC;

  /* ---- Support: Verde esmeralda (#00A86B) ----------------- */
  /* Success only. NOT part of the core identity.              */
  --green-700: #007A4E;
  --green-600: #008F5B;
  --green-500: #00A86B; /* ★ esmeralda */
  --green-400: #33BC88;
  --green-100: #D6F3E7;
  --green-50:  #EAFAF2;

  /* ---- Danger (utility, not brand) ------------------------ */
  --red-600: #C01F33;
  --red-500: #D7263D;
  --red-100: #FBDDE1;
  --red-50:  #FDEEF0;

  /* ---- Neutral ramp (tinted toward navy) ------------------ */
  --white:     #FFFFFF;
  --neutral-50:  #F5F6FF; /* ★ main background (replaces pure white) */
  --neutral-100: #ECEDF7;
  --neutral-200: #DEDFEC;
  --neutral-300: #C9CADC;
  --neutral-400: #A7A8C2;
  --neutral-500: #8485A3;
  --neutral-600: #616283;
  --neutral-700: #474864;
  --neutral-800: #2B2C45;
  --neutral-900: #16163A; /* deep navy ink */

  /* ========================================================= */
  /* Semantic aliases — reference these in components.          */
  /* ========================================================= */

  /* Brand roles */
  --color-primary:        var(--navy-800);
  --color-primary-hover:  var(--navy-700);
  --color-primary-active: var(--navy-900);
  --color-accent:         var(--gold-500);
  --color-accent-hover:   var(--gold-600);
  --color-accent-active:  var(--gold-700);
  --color-info:           var(--sky-500);
  --color-info-hover:     var(--sky-600);
  --color-success:        var(--green-500);
  --color-success-hover:  var(--green-600);
  --color-danger:         var(--red-500);
  --color-danger-hover:   var(--red-600);

  /* Surfaces */
  --surface-page:         var(--neutral-50);
  --surface-card:         var(--white);
  --surface-sunken:       var(--neutral-100);
  --surface-brand:        var(--navy-800);
  --surface-brand-deep:   var(--navy-900);
  --surface-accent-subtle: var(--gold-50);
  --surface-info-subtle:  var(--sky-50);
  --surface-success-subtle: var(--green-50);
  --surface-danger-subtle: var(--red-50);

  /* Text — never pure black */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-muted:      var(--neutral-500);
  --text-on-brand:   var(--white);
  --text-on-brand-soft: var(--navy-200);
  --text-on-accent:  var(--navy-800); /* navy on gold = legible + on-brand */
  --text-link:       var(--navy-800);
  --text-link-hover: var(--sky-600);

  /* Borders */
  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-400);
  --border-brand:    var(--navy-800);
  --border-focus:    var(--sky-500);

  /* Focus ring */
  --ring-focus: 0 0 0 3px color-mix(in srgb, var(--sky-500) 45%, transparent);
}

/* ============================================================
   FUNJOSE · Typography tokens
   ============================================================ */

:root {
  /* Families — only Poppins (display) + Manrope (everything else) */
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  /* Figures / data / amounts / IDs: Manrope (proportional figures). No monospace. */
  --font-numeric: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: var(--font-numeric); /* legacy alias → Manrope */

  /* Weights */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Type scale (1.25 major-third-ish, 16px root) */
  --text-2xs:  0.6875rem; /* 11 */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.125rem;  /* 34 */
  --text-4xl:  2.75rem;   /* 44 */
  --text-5xl:  3.5rem;    /* 56 */
  --text-6xl:  4.5rem;    /* 72 */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em; /* eyebrows / labels */

  /* Semantic display roles */
  --display-1-size: var(--text-6xl);
  --display-1-weight: var(--weight-extrabold);
  --display-1-leading: var(--leading-tight);
  --display-1-tracking: var(--tracking-tight);

  --heading-1-size: var(--text-4xl);
  --heading-1-weight: var(--weight-extrabold);
  --heading-1-leading: var(--leading-tight);
  --heading-1-tracking: var(--tracking-tight);

  --heading-2-size: var(--text-3xl);
  --heading-2-weight: var(--weight-bold);
  --heading-2-leading: var(--leading-snug);

  --heading-3-size: var(--text-2xl);
  --heading-3-weight: var(--weight-bold);
  --heading-3-leading: var(--leading-snug);

  --body-lg-size: var(--text-lg);
  --body-size: var(--text-base);
  --body-leading: var(--leading-relaxed);

  --eyebrow-size: var(--text-sm);
  --eyebrow-weight: var(--weight-bold);
  --eyebrow-tracking: var(--tracking-wider);

  --label-size: var(--text-sm);
  --label-weight: var(--weight-semibold);
}

/* ============================================================
   FUNJOSE · Spacing & layout tokens
   4px base grid. Generous whitespace is a brand principle.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   0.25rem; /* 4  */
  --space-2:   0.5rem;  /* 8  */
  --space-3:   0.75rem; /* 12 */
  --space-4:   1rem;    /* 16 */
  --space-5:   1.5rem;  /* 24 */
  --space-6:   2rem;    /* 32 */
  --space-7:   2.5rem;  /* 40 */
  --space-8:   3rem;    /* 48 */
  --space-9:   4rem;    /* 64 */
  --space-10:  5rem;    /* 80 */
  --space-12:  6rem;    /* 96 */
  --space-16:  8rem;    /* 128 */

  /* Layout */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --section-y: var(--space-12);   /* vertical rhythm between sections */
  --gutter: var(--space-5);
}

/* ============================================================
   FUNJOSE · Radii, shadows & motion
   Soft, navy-tinted shadows on the light (#F5F6FF) canvas.
   Moderate rounding — friendly but institutional.
   ============================================================ */

:root {
  /* Corner radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-2xl:  30px;
  --radius-pill: 999px;

  /* Shadows — tinted with navy so they sit on the lilac canvas */
  --shadow-xs:  0 1px 2px rgba(8, 2, 95, 0.06);
  --shadow-sm:  0 1px 3px rgba(8, 2, 95, 0.08), 0 1px 2px rgba(8, 2, 95, 0.05);
  --shadow-md:  0 4px 14px rgba(8, 2, 95, 0.08), 0 2px 4px rgba(8, 2, 95, 0.05);
  --shadow-lg:  0 12px 32px rgba(8, 2, 95, 0.10), 0 4px 8px rgba(8, 2, 95, 0.05);
  --shadow-xl:  0 24px 60px rgba(8, 2, 95, 0.14), 0 8px 16px rgba(8, 2, 95, 0.06);
  --shadow-gold: 0 10px 24px rgba(254, 169, 0, 0.30);

  /* Motion — calm, no bounce. Trust over playfulness. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
  --transition-base: all var(--duration-base) var(--ease-out);
}

/* ============================================================
   FUNJOSE · Base element defaults & helpers
   Light-first. Page sits on the lilac canvas, not white.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-primary); font-family: var(--font-display); }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

::selection { background: var(--gold-200); color: var(--navy-900); }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; }

/* ---- Type helpers ---- */
.fjs-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-info);
}
.fjs-display { font-family: var(--font-display); font-weight: var(--display-1-weight);
  font-size: var(--display-1-size); line-height: var(--display-1-leading); letter-spacing: var(--display-1-tracking); }
.fjs-h1 { font-family: var(--font-display); font-size: var(--heading-1-size); font-weight: var(--heading-1-weight); line-height: var(--heading-1-leading); letter-spacing: var(--heading-1-tracking); }
.fjs-h2 { font-family: var(--font-display); font-size: var(--heading-2-size); font-weight: var(--heading-2-weight); line-height: var(--heading-2-leading); }
.fjs-h3 { font-family: var(--font-display); font-size: var(--heading-3-size); font-weight: var(--heading-3-weight); line-height: var(--heading-3-leading); }
.fjs-lead { font-size: var(--body-lg-size); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.fjs-muted { color: var(--text-muted); }
.fjs-mono { font-family: var(--font-numeric); }
.fjs-numeric { font-family: var(--font-numeric); letter-spacing: -0.01em; }

  html, body { margin: 0; background: var(--surface-page); overflow-x: hidden; }
  #root { min-height: 100vh; display: flex; flex-direction: column; max-width: 100%; overflow-x: hidden; }

  /* Indeterminate, calm progress bar (no bounce) */
  .recon-track {
    position: relative; height: 8px; width: 100%;
    background: var(--navy-100); border-radius: var(--radius-pill); overflow: hidden;
  }
  /* indeterminate moving segment (original look) + travelling sheen */
  .recon-fill {
    position: absolute; top: 0; left: 0; height: 100%; width: 40%;
    border-radius: var(--radius-pill); overflow: hidden;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-500) 55%, var(--gold-600));
    animation: recon-slide 2.4s var(--ease-in-out) infinite;
  }
  .recon-fill::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -50%; width: 55%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: recon-sheen 1.6s var(--ease-in-out) infinite;
  }
  @keyframes recon-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
  }
  @keyframes recon-sheen {
    0%   { left: -55%; }
    60%, 100% { left: 110%; }
  }

  .recon-pulse { animation: recon-pulse 2s var(--ease-in-out) infinite; }
  @keyframes recon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
  }

  /* gentle entrance */
  .recon-rise { opacity: 0; transform: translateY(14px); animation: recon-rise 0.7s var(--ease-out) forwards; }
  @keyframes recon-rise { to { opacity: 1; transform: none; } }

  @media (prefers-reduced-motion: reduce) {
    .recon-fill { animation: none; left: 0; width: 70%; }
    .recon-fill::after { animation: none; display: none; }
    .recon-pulse, .recon-rise { animation: none; opacity: 1; transform: none; }
  }

  .fjs-field-control:focus-within { box-shadow: var(--ring-focus); border-color: var(--sky-500) !important; }
  .fjs-input { font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-primary); }
  .fjs-input::placeholder { color: var(--neutral-400); }

  .social-btn { transition: var(--transition-base); }
  .social-btn:hover { background: rgba(255,255,255,0.20) !important; color: var(--gold-400) !important; transform: translateY(-2px); }

  @media (max-width: 880px) {
    .recon-contact-grid { grid-template-columns: 1fr !important; }
    .recon-footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  }
  @media (max-width: 560px) {
    .recon-form-row { grid-template-columns: 1fr !important; }
  }

  /* Grid blowout fix: cells must not push beyond viewport */
  .recon-contact-grid > *, .recon-form-row > *, .recon-footer-grid > * { min-width: 0; }