/* ============================================================
   Mindup — Design Tokens
   Brand manual: "La empatía como pilar central." The mark reflects
   "mind" (solid) into "up" (water reflection) — the whole visual
   language follows that same idea: tangible + calm reflection.
   ============================================================ */

/* Fonts: Montserrat is the single family — display through body.
   Self-hosted variable fonts (100–900 weights, normal + italic). */
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------
     COLOR — CORE BRAND
     --------------------------------------------------------- */
  --mu-purple:        #651cf8;   /* Primary. The "mind".          */
  --mu-purple-ink:    #3d0fa3;   /* Pressed / text on light tint. */
  --mu-purple-hover:  #7a38f9;
  --mu-lilac:         #d8c5fd;   /* Secondary. The "up" reflection. */
  --mu-lilac-soft:    #ece1fe;
  --mu-lilac-mist:    #f6f0ff;   /* Lightest surface tint.        */

  /* Reflection ramp — the transparencies the manual prescribes
     for the "up" wordmark. Reuse anywhere a reflection is drawn. */
  --mu-reflect-40:    rgba(101, 28, 248, 0.40);
  --mu-reflect-20:    rgba(101, 28, 248, 0.20);
  --mu-reflect-05:    rgba(101, 28, 248, 0.05);

  /* ---------------------------------------------------------
     COLOR — NEUTRALS
     Anchored to "Negro 60% / 30%" from the manual, extended into
     a full grey ramp so UI work has enough range.
     --------------------------------------------------------- */
  --mu-ink:           #0f0a1f;   /* Near-black with a purple bias. */
  --mu-ink-80:        #2a2438;
  --mu-ink-60:        #5c5668;   /* Manual: Negro 60%.             */
  --mu-ink-40:        #8e8a97;
  --mu-ink-30:        #b2afb9;   /* Manual: Negro 30%.             */
  --mu-ink-20:        #d4d2d8;
  --mu-ink-10:        #ebeaee;
  --mu-ink-05:        #f5f4f7;
  --mu-paper:         #ffffff;

  /* ---------------------------------------------------------
     COLOR — SEMANTIC (extended for product UI)
     These are not in the manual; they are derived to harmonize
     with the purple/lilac pair.
     --------------------------------------------------------- */
  --mu-success:       #22c55e;
  --mu-success-soft:  #dcfce7;
  --mu-warning:       #f59e0b;
  --mu-warning-soft:  #fef3c7;
  --mu-danger:        #ef4444;
  --mu-danger-soft:   #fee2e2;
  --mu-info:          #3b82f6;
  --mu-info-soft:     #dbeafe;

  /* Surfaces */
  --mu-surface:           var(--mu-paper);
  --mu-surface-subtle:    var(--mu-ink-05);
  --mu-surface-tint:      var(--mu-lilac-mist);
  --mu-surface-inverted:  var(--mu-ink);
  --mu-border:            var(--mu-ink-10);
  --mu-border-strong:     var(--mu-ink-20);

  /* ---------------------------------------------------------
     TYPE
     --------------------------------------------------------- */
  --mu-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mu-font-sans:    'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale (rem; 1rem = 16px) */
  --mu-fs-display-xl: 5.5rem;   /* 88 — hero marketing only       */
  --mu-fs-display:    4rem;     /* 64 — section openers           */
  --mu-fs-h1:         2.5rem;   /* 40                              */
  --mu-fs-h2:         2rem;     /* 32                              */
  --mu-fs-h3:         1.5rem;   /* 24                              */
  --mu-fs-h4:         1.25rem;  /* 20                              */
  --mu-fs-body-lg:    1.125rem; /* 18                              */
  --mu-fs-body:       1rem;     /* 16                              */
  --mu-fs-body-sm:    0.875rem; /* 14                              */
  --mu-fs-caption:    0.75rem;  /* 12                              */
  --mu-fs-micro:      0.6875rem;/* 11 — eyebrows, tags            */

  --mu-lh-tight:  1.1;   /* @kind font */
  --mu-lh-snug:   1.25;  /* @kind font */
  --mu-lh-normal: 1.5;   /* @kind font */
  --mu-lh-loose:  1.7;   /* @kind font */

  --mu-ls-display:  -0.025em;  /* Tight for Montserrat at display size */
  --mu-ls-heading:  -0.01em;
  --mu-ls-body:      0;        /* @kind font */
  --mu-ls-eyebrow:   0.14em;   /* for uppercase micro labels     */

  /* ---------------------------------------------------------
     SPACING — 4px base grid
     --------------------------------------------------------- */
  --mu-s-0:  0;          /* @kind spacing */
  --mu-s-1:  0.25rem;   /*  4 */
  --mu-s-2:  0.5rem;    /*  8 */
  --mu-s-3:  0.75rem;   /* 12 */
  --mu-s-4:  1rem;      /* 16 */
  --mu-s-5:  1.5rem;    /* 24 */
  --mu-s-6:  2rem;      /* 32 */
  --mu-s-7:  2.5rem;    /* 40 */
  --mu-s-8:  3rem;      /* 48 */
  --mu-s-9:  4rem;      /* 64 */
  --mu-s-10: 6rem;      /* 96 */

  /* ---------------------------------------------------------
     RADII — generous & round. The mark is built of soft curves.
     --------------------------------------------------------- */
  --mu-r-xs:   4px;
  --mu-r-sm:   8px;
  --mu-r-md:   12px;
  --mu-r-lg:   20px;
  --mu-r-xl:   28px;
  --mu-r-2xl:  40px;
  --mu-r-pill: 999px;

  /* ---------------------------------------------------------
     SHADOWS — soft, tinted with purple for cohesion.
     --------------------------------------------------------- */
  --mu-sh-1: 0 1px 2px rgba(15, 10, 31, 0.04), 0 1px 1px rgba(15, 10, 31, 0.03);
  --mu-sh-2: 0 4px 12px rgba(15, 10, 31, 0.06), 0 2px 4px rgba(15, 10, 31, 0.04);
  --mu-sh-3: 0 12px 28px rgba(61, 15, 163, 0.10), 0 4px 10px rgba(15, 10, 31, 0.05);
  --mu-sh-4: 0 24px 56px rgba(61, 15, 163, 0.18), 0 8px 18px rgba(15, 10, 31, 0.07);
  --mu-sh-glow: 0 0 0 6px rgba(101, 28, 248, 0.12);

  /* Focus ring */
  --mu-focus: 0 0 0 3px rgba(101, 28, 248, 0.35);

  /* Motion */
  --mu-ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --mu-ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --mu-dur-1: 120ms;   /* @kind other */
  --mu-dur-2: 200ms;   /* @kind other */
  --mu-dur-3: 320ms;   /* @kind other */
  --mu-dur-4: 520ms;   /* @kind other */
}

/* ------------------------------------------------------------
   Typography base — attach to <body> or a root container.
   ------------------------------------------------------------ */
body {
  font-family: var(--mu-font-sans);
  font-size: var(--mu-fs-body);
  line-height: var(--mu-lh-normal);
  color: var(--mu-ink);
  background: var(--mu-lilac-mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reusable typography classes ------------------------------- */
.mu-display,
.mu-h1, .mu-h2 {
  font-family: var(--mu-font-display);
  font-weight: 800;         /* Montserrat Extra Bold for display */
  letter-spacing: var(--mu-ls-display);
  line-height: var(--mu-lh-tight);
  color: var(--mu-ink);
}
.mu-display   { font-size: var(--mu-fs-display); }
.mu-h1        { font-size: var(--mu-fs-h1); }
.mu-h2        { font-size: var(--mu-fs-h2); letter-spacing: var(--mu-ls-heading); }

.mu-h3, .mu-h4 {
  font-family: var(--mu-font-sans);
  font-weight: 700;
  line-height: var(--mu-lh-snug);
  letter-spacing: var(--mu-ls-heading);
}
.mu-h3 { font-size: var(--mu-fs-h3); }
.mu-h4 { font-size: var(--mu-fs-h4); }

.mu-body-lg { font-size: var(--mu-fs-body-lg); line-height: var(--mu-lh-normal); }
.mu-body    { font-size: var(--mu-fs-body);    line-height: var(--mu-lh-normal); }
.mu-body-sm { font-size: var(--mu-fs-body-sm); line-height: var(--mu-lh-normal); }
.mu-caption { font-size: var(--mu-fs-caption); line-height: var(--mu-lh-normal); color: var(--mu-ink-60); }

.mu-eyebrow {
  font-family: var(--mu-font-sans);
  font-size: var(--mu-fs-micro);
  font-weight: 700;
  letter-spacing: var(--mu-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mu-purple);
}

/* ------------------------------------------------------------
   Focus utility — consistent accessible focus ring everywhere.
   ------------------------------------------------------------ */
.mu-focusable:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--mu-focus);
  border-radius: var(--mu-r-sm);
}

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