/* ============================================================
 * Meefi Design System — Colors & Type
 * ------------------------------------------------------------
 * Brand: Meefi — Global treasury platform for SMEs (PyMEs).
 * Spanish-language fintech targeting Mexican import businesses.
 *
 * Sources:
 *  - Brandbook_Meefi.pdf (uploads/)
 *  - meefi-landing/ codebase (Tailwind + shadcn/ui)
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Montserrat referenced as titles font in --font-display; falls back to Inter. */

:root {
  /* --------------------------------------------------
   * BRAND COLORS  (from Brandbook)
   * -------------------------------------------------- */
  --meefi-blue:        #0530CE;  /* Primary, web/UI            */
  --meefi-blue-deep:   #1E2FC4;  /* Brand secondary blue       */
  --meefi-blue-dark:   #03208F;  /* Heavy / accent / dark mode */
  --meefi-light:       #F8FAFD;  /* Tint / surface background  */

  /* Tonal scale derived from #0530CE (HSL 227° 95%)             */
  --blue-50:   #ECEFFC;
  --blue-100:  #DADFFA;
  --blue-200:  #B4BEF5;
  --blue-300:  #8CA0F6;
  --blue-400:  #5A74EC;
  --blue-500:  #0530CE;   /* === BRAND PRIMARY === */
  --blue-600:  #0428B0;
  --blue-700:  #04218C;
  --blue-800:  #031A6F;
  --blue-900:  #03134E;
  --blue-950:  #020B30;

  /* --------------------------------------------------
   * NEUTRALS  (HSL 220° 9% — Mercury-style slate)
   * -------------------------------------------------- */
  --ink:       #1B1F26;   /* Foreground / headings         */
  --ink-muted: #6B7280;   /* Muted body, captions           */
  --line:      #E5E7EB;   /* Default border                 */
  --line-soft: #EEF0F3;   /* Subtle separators              */
  --surface:   #FFFFFF;
  --surface-1: #F8FAFD;   /* meefi-light – section panels   */
  --surface-2: #F3F4F6;   /* Cards, secondary surfaces      */

  /* --------------------------------------------------
   * SEMANTIC TOKENS
   * -------------------------------------------------- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-muted);
  --fg-3: #9CA3AF;
  --fg-on-blue: #FFFFFF;

  --bg-1: var(--surface);
  --bg-2: var(--surface-1);
  --bg-3: var(--surface-2);

  --border:        rgba(17,24,39,0.07);
  --border-soft:   rgba(17,24,39,0.045);

  --accent:        var(--meefi-blue);
  --accent-hover:  var(--blue-600);
  --accent-soft:   var(--blue-50);

  --success: #16A34A;
  --warning: #D97706;
  --danger:  #DC2626;

  /* --------------------------------------------------
   * TYPOGRAPHY
   * -------------------------------------------------- */
  --font-display: 'Montserrat', 'Inter', system-ui, sans-serif; /* Titles */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif; /* Paragraphs / UI */
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Scale — Mercury-inspired large-display, used on landing & app */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  4rem;      /* 64 */
  --text-7xl:  4.5rem;    /* 72 — hero */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;  /* hero / display */
  --tracking-snug:   -0.02em;  /* section H2     */
  --tracking-normal: 0;

  /* --------------------------------------------------
   * SPACING / SIZING
   * -------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Container max-widths used in the landing */
  --container-narrow: 768px;
  --container:        1024px;
  --container-wide:   1200px;

  /* --------------------------------------------------
   * RADII  ("rounded but not pill" per brandbook)
   * -------------------------------------------------- */
  --radius-sm:  8px;
  --radius:    16px;     /* canonical card / container radius */
  --radius-md: 16px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* --------------------------------------------------
   * SHADOWS  (premium fintech, very soft)
   * -------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(27,31,38,0.03);
  --shadow-sm: 0 1px 3px 0 rgba(27,31,38,0.04), 0 1px 2px -1px rgba(27,31,38,0.04);
  --shadow-md: 0 4px 6px -1px rgba(27,31,38,0.05), 0 2px 4px -2px rgba(27,31,38,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(27,31,38,0.05), 0 4px 6px -4px rgba(27,31,38,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(27,31,38,0.06), 0 8px 10px -6px rgba(27,31,38,0.06);
  --shadow-elegant: 0 4px 24px -4px rgba(5,48,206,0.12);
  --shadow-soft:    0 2px 12px -2px rgba(27,31,38,0.06);

  /* Canonical CARD drop shadow — one definition applied uniformly to
   * every light-surface card/panel so depth reads consistently. */
  --shadow-card:       0 1px 0 rgba(15,23,42,0.02),
                       0 10px 28px -18px rgba(15,23,42,0.10);
  --shadow-card-hover: 0 1px 0 rgba(15,23,42,0.02),
                       0 22px 44px -22px rgba(15,23,42,0.16);

  /* --------------------------------------------------
   * MOTION
   * -------------------------------------------------- */
  --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);   /* signature fade-up */
  --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    195ms;
  --duration-base:    260ms;
  --duration-slow:    390ms;
  --duration-hero:    910ms;

  /* Shared cadence for ambient loops (badge dots, halos, beams) so the
   * whole page pulses in unison instead of at competing speeds. */
  --pulse-cycle:      3.4s;
}

/* ==============================================================
 *  SEMANTIC TYPE RULES  — apply with classes or @extend-style
 * ============================================================== */

.t-hero {
  font-family: var(--font-display);
  font-weight: 500;             /* Mercury-style "medium" display */
  font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--fg-3);
}

.t-mono,
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: -0.01em;
}

/* ==============================================================
 *  COMMON UI PRIMITIVES — use directly or copy patterns
 * ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-smooth),
              color var(--duration-base) var(--ease-smooth),
              transform var(--duration-base) var(--ease-smooth),
              box-shadow var(--duration-base) var(--ease-smooth);
}
.btn-primary {
  background: var(--accent);
  color: var(--fg-on-blue);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-outline {
  background: var(--bg-1);
  color: var(--fg-1);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--bg-3); }
.btn-ghost {
  background: transparent;
  color: var(--fg-1);
}
.btn-ghost:hover { background: var(--bg-3); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.06),
              inset 0 1px 0 rgba(255,255,255,0.8);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
}

input.field,
.field {
  height: 40px;
  width: 100%;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-1);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(5,48,206,0.15);
}