/* ==========================================================================
   MV ASESORÍAS — Design Tokens: Color + Type
   Monochrome, engineering-precise. Ink + steel-gray + white, one steel accent.
   Fonts are Google Fonts substitutes (see README "Font substitution" note).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand core (sampled from logo) ---------------------------------- */
  --mv-ink:        #1A1D22;   /* logo background — primary brand surface     */
  --mv-gray:       #86868A;   /* logo "V" — brand neutral                    */
  --mv-white:      #FFFFFF;   /* logo "M" + wordmark                         */

  /* ---- Neutral ramp (cool undertone, hue ~255) ------------------------- */
  --ink-900: #121419;
  --ink-800: #1A1D22;   /* = brand ink */
  --ink-700: #23272E;
  --ink-600: #2E333B;
  --ink-500: #3C424B;
  --gray-500: #565B63;
  --gray-400: #86868A;  /* = brand gray */
  --gray-300: #A7AAAF;
  --gray-200: #CCCED2;
  --gray-150: #DDDEE1;
  --gray-100: #E9EAEC;
  --gray-50:  #F4F5F6;
  --paper:    #FAFAFB;
  --white:    #FFFFFF;

  /* ---- Accent: steel signal (used sparingly) --------------------------- */
  --accent:        #2F6BE0;
  --accent-hover:  #245AC4;
  --accent-active: #1E4DA6;
  --accent-weak:   #EAF1FD;   /* tint for light surfaces */
  --accent-ring:   rgba(47,107,224,0.40);

  /* ---- Semantic (muted, restrained) ------------------------------------ */
  --success: #2E9E6B;
  --warning: #C7902E;
  --danger:  #D14B4B;
  --info:    var(--accent);

  /* ---- Semantic surface roles (LIGHT theme — default) ------------------ */
  --bg:        var(--paper);
  --surface:   var(--white);
  --surface-2: var(--gray-50);
  --border:    var(--gray-150);
  --border-strong: var(--gray-300);
  --fg1:       var(--ink-800);   /* primary text          */
  --fg2:       var(--gray-500);  /* secondary text        */
  --fg3:       var(--gray-400);  /* tertiary / muted      */
  --on-accent: var(--white);
  --on-ink:    var(--white);

  /* ---- Type families --------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Type scale ------------------------------------------------------ */
  --fs-display: 4rem;     /* 64 */
  --fs-h1:      3rem;     /* 48 */
  --fs-h2:      2.25rem;  /* 36 */
  --fs-h3:      1.5rem;   /* 24 */
  --fs-h4:      1.25rem;  /* 20 */
  --fs-lg:      1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 */
  --fs-sm:      0.875rem; /* 14 */
  --fs-xs:      0.75rem;  /* 12 */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.14em;  /* overlines / eyebrows */

  /* ---- Spacing (4px base) --------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---- Radii (tight / angular brand) ----------------------------------- */
  --r-xs: 2px;   --r-sm: 4px;   --r-md: 6px;   --r-lg: 10px;  --r-pill: 999px;

  /* ---- Elevation (cool, low) ------------------------------------------- */
  --sh-1: 0 1px 2px rgba(18,20,25,0.06), 0 1px 1px rgba(18,20,25,0.04);
  --sh-2: 0 2px 4px rgba(18,20,25,0.06), 0 4px 12px rgba(18,20,25,0.07);
  --sh-3: 0 8px 24px rgba(18,20,25,0.10), 0 2px 6px rgba(18,20,25,0.06);
  --sh-focus: 0 0 0 3px var(--accent-ring);
}

/* ---- DARK theme surface roles (brand-native) --------------------------- */
[data-theme="dark"] {
  --bg:        var(--ink-900);
  --surface:   var(--ink-800);
  --surface-2: var(--ink-700);
  --border:    rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.22);
  --fg1:       #F4F5F6;
  --fg2:       #A7AAAF;
  --fg3:       #6E737B;
  --accent:        #5A8BF0;
  --accent-hover:  #6E9BF3;
  --accent-weak:   rgba(90,139,240,0.14);
  --on-accent: var(--ink-900);
  --sh-1: 0 1px 2px rgba(0,0,0,0.4);
  --sh-2: 0 4px 14px rgba(0,0,0,0.45);
  --sh-3: 0 10px 30px rgba(0,0,0,0.55);
}

/* ==========================================================================
   Semantic element styles — apply via classes/elements
   ========================================================================== */
.mv-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); }
h1, .mv-h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h1);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); }
h2, .mv-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg1); }
h3, .mv-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3);
  line-height: var(--lh-snug); color: var(--fg1); }
h4, .mv-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4);
  line-height: var(--lh-snug); color: var(--fg1); }
.mv-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-lg);
  line-height: var(--lh-body); color: var(--fg2); }
body, p, .mv-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--fg1); }
.mv-small { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg2); }
.mv-overline { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg2); }
code, .mv-code { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--fg1); }